Nút CSS
Tìm hiểu cách tạo kiểu cho các nút bằng CSS.
Kiểu nút cơ bản
Nút
Ví dụ
.button {
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Hãy tự mình thử »Màu nút
Sử dụng thuộc tính background-color
để thay đổi màu nền của nút:
Ví dụ
.button1 {background-color: #04AA6D;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
Hãy tự mình thử » Kích thước nút
Sử dụng thuộc tính font-size
để thay đổi kích thước phông chữ của nút:
Ví dụ
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Hãy tự mình thử » Sử dụng thuộc tính padding
để thay đổi phần đệm của nút:
Ví dụ
.button1 {padding: 10px
24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Hãy tự mình thử »Nút tròn
Sử dụng thuộc tính border-radius
để thêm các góc bo tròn cho một nút:
Ví dụ
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Hãy tự mình thử »Viền nút màu
Sử dụng thuộc tính border
để thêm đường viền màu cho nút:
Ví dụ
.button1 {
background-color: white;
color: black;
border: 2px solid #04AA6D; /* Green */
}
...
Hãy tự mình thử »Nút có thể di chuột
Sử dụng bộ chọn :hover
để thay đổi kiểu nút khi bạn di chuột qua nút đó.
Mẹo: Sử dụng thuộc tính transition-duration
để xác định tốc độ của hiệu ứng "di chuột":
Ví dụ
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #04AA6D; /* Green */
color: white;
}
...
Hãy tự mình thử »Nút bóng
Sử dụng thuộc tính box-shadow
để thêm bóng vào nút:
Ví dụ
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0
rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px
16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Hãy tự mình thử »Nút bị vô hiệu hóa
Sử dụng thuộc tính opacity
để thêm độ trong suốt cho nút (tạo giao diện "bị vô hiệu hóa").
Mẹo: Bạn cũng có thể thêm thuộc tính cursor
có giá trị "không được phép", thuộc tính này sẽ hiển thị "biển báo cấm đỗ xe" khi bạn di chuột qua nút:
Chiều rộng nút
Theo mặc định, kích thước của nút được xác định bởi nội dung văn bản của nó (rộng bằng nội dung của nó). Sử dụng thuộc tính width
để thay đổi độ rộng của nút:
Nhóm nút
Xóa lề và thêm float:left
vào mỗi nút để tạo nhóm nút:
Nhóm nút có viền
Sử dụng thuộc tính border
để tạo nhóm nút có viền:
Nhóm nút dọc
Sử dụng display:block
thay vì float:left
để nhóm các nút bên dưới nhau, thay vì cạnh nhau: