Các nút CSS
Tìm hiểu cách tạo kiểu cho các nút bằng CSS.
Tạo kiểu nút cơ bản
Thí dụ
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Màu sắc của nút
Sử dụng thuộc background-colortính để thay đổi màu nền của nút:
Thí dụ
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
Kích thước nút
Sử dụng thuộc font-sizetính để thay đổi kích thước phông chữ của một nút:
Thí dụ
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Sử dụng thuộc paddingtính để thay đổi phần đệm của nút:
Thí dụ
.button1 {padding: 10px
24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Các nút làm tròn
Sử dụng thuộc border-radiustính để thêm các góc tròn vào một nút:
Thí dụ
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Đường viền nút màu
Sử dụng thuộc bordertính để thêm đường viền màu vào nút:
Thí dụ
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Các nút có thể di chuyển
Sử dụng :hoverbộ chọn để thay đổi kiểu của nút khi bạn di chuột qua nút đó.
Mẹo: Sử dụng thuộc transition-durationtính để xác định tốc độ của hiệu ứng "di chuột":
Thí dụ
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Các nút bóng
Sử dụng thuộc box-shadowtính để thêm bóng vào một nút:
Thí 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);
}
Các nút bị vô hiệu hóa
Sử dụng thuộc opacitytính để 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 cursortính với 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:
Thí dụ
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
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 widthtính để thay đổi chiều rộng của nút:
Thí dụ
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
Nhóm nút
Xóa lề và thêm float:leftvào từng nút để tạo nhóm nút:
Thí dụ
.button {
float: left;
}
Nhóm nút có viền
Sử dụng thuộc bordertính để tạo nhóm nút có viền:
Thí dụ
.button {
float: left;
border: 1px
solid green;
}
Nhóm nút dọc
Sử dụng display:blockthay vì float:leftđể nhóm các nút bên dưới nhau, thay vì cạnh nhau:
Thí dụ
.button {
display: block;
}
Nút trên hình ảnh
Các nút hoạt hình
Thí dụ
Thêm một mũi tên khi di chuột:
Thí dụ
Thêm hiệu ứng "nhấn" khi nhấp chuột:
Thí dụ
Làm mờ khi di chuột:
Thí dụ
Thêm hiệu ứng "gợn sóng" khi nhấp chuột: