CSS

Các nút

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

Ví dụ

.button {
background-color: # 4CAF50; / * Đường viền * /
xanh lục: không có;

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
một
nút:

Ví dụ

.button1 {background-color: # 4CAF50;} / * Xanh lục * /
.button2
{background-color: # 008CBA;} / * Blue * /
.button3 {background-color:
# f44336;} / * Đỏ * /
.button4 {background-color: # e7e7e7; màu: đen;} / * Xám * /
.button5
{background-color: # 555555;} / * Đen * /

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:

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ử »

Các nút được làm tròn

Sử dụng thuộc tính border-radius để thêm các góc tròn vào nút:

Đường viền nút màu

Sử dụng thuộc tính border để thêm đường viền màu vào nút:

Ví dụ

.button1 {
background-color: white;
color: black;
đường viền: 2px solid # 4CAF50; / * Màu xanh lá cây * /
}
…

Hãy tự mình thử »

Các nút có thể di chuyển

Sử dụng bộ chọn : hover để thay đổi kiểu của nút khi bạn di chuyển
di chuột qua nó.

Mẹo: Sử dụng thuộc tính chuyển tiếp-thời lượng để xác định
tốc độ của hiệu ứng “di chuột”:

Ví dụ

.button {
thời lượng chuyển tiếp: 0,4 giây;
}

.button: hover {
màu nền: # 4CAF50; / * Màu xanh lục * /
: trắng;
}
…

Hãy tự mình thử »

Các 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ử »

Các 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
“khuyết tật”).

Mẹo: Bạn cũng có thể thêm thuộc tính con trỏ với giá trị là
“không được phép”, sẽ hiển thị “biển báo cấm đỗ xe” khi bạn di chuột qua
nút:

Chiều rộng của 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). Sử dụng thuộc tính width để thay đổi chiều 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 một nhóm nút:

Nhóm nút có viền

Sử dụng thuộc tính border để tạo nút có viền
nhóm:

Ví dụ

.button {
float: left;
border: 1px
màu xanh lục đặc;
}

Hãy tự mình thử »

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 mỗi nút khác, thay vì cạnh nhau:

Nút trên hình ảnh

Hãy tự mình thử »

Các nút hoạt hình

Ví dụ

Thêm một mũi tên khi di chuột:

Hãy tự mình thử »

Ví dụ

Thêm hiệu ứng “được nhấn” khi nhấp chuột:

Hãy tự mình thử »

Ví dụ

Làm mờ khi di chuột:

Hãy tự mình thử »

Ví dụ

Thêm hiệu ứng “gợn sóng” khi nhấp chuột:

Hãy tự mình thử »