Nút CSS

Học cách sử dụng CSS để thiết lập樣式 cho nút.

Kiểu dáng nút cơ bản

Mẫu

.button {
  background-color: #4CAF50; /* Xanh lá cây */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Thử ngay

Màu sắc nút

Hãy sử dụng background-color Thuộc tính thay đổi màu nền của nút:

Mẫu

.button1 {background-color: #4CAF50;} /* Xanh lá cây */
.button2 {background-color: #008CBA;} /* Xanh dương */
.button3 {background-color: #f44336;} /* Đỏ */ 
.button4 {background-color: #e7e7e7; color: black;} /* Xám */ 
.button5 {background-color: #555555;} /* Đen */

Thử ngay

Kích thước nút

Hãy sử dụng font-size Thuộc tính thay đổi kích thước chữ của nút:

Mẫu

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Thử ngay

Hãy sử dụng padding Thuộc tính thay đổi khoảng cách nội bộ của nút:

Mẫu

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Thử ngay

Nút góc tròn

Hãy sử dụng border-radius Thuộc tính thêm góc tròn cho nút:

Mẫu

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Thử ngay

Viền màu của nút

Hãy sử dụng border Thuộc tính để thêm viền màu cho nút:

Mẫu

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Xanh lá cây */
}
...

Thử ngay

Nút có thể di chuột


Khi di chuột lên trên nút, sử dụng :hover Chọn器 có thể thay đổi phong cách của nút.

Lưu ý:Hãy sử dụng transition-duration Thuộc tính để xác định tốc độ của hiệu ứng "sweep":

Mẫu

.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #4CAF50; /* Xanh lá cây */
  color: white;
}
...

Thử ngay

Nút bóng

Hãy sử dụng box-shadow Thuộc tính để thêm bóng cho nút:

Mẫu

.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);
}

Thử ngay

Nút bị vô hiệu hóa

Hãy sử dụng opacity Thuộc tính để thêm độ trong suốt cho nút (tạo ra vẻ "bị vô hiệu hóa`).

Lưu ý:Bạn cũng có thể thêm thuộc tính với giá trị "not-allowed" cho cursor Thuộc tính, khi bạn di chuột lên nút, thuộc tính này sẽ hiển thị "bán phép cấm dừng" (biểu tượng cấm dừng):

Mẫu

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Thử ngay

Độ rộng của nút


Mặc định, kích thước của nút phụ thuộc vào nội dung văn bản của nó (ngay bằng độ rộng của nội dung). Hãy sử dụng width Sử dụng thuộc tính để thay đổi độ rộng của nút:

Mẫu

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

Thử ngay

Nhóm nút

　

Xóa khoảng cách ngoài và thêm thuộc tính cho mỗi nút float:leftđể tạo nhóm nút:

Mẫu

.button {
  float: left;
}

Thử ngay

Nhóm nút có viền

　

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

Mẫu

.button {
  float: left;
  border: 1px solid green;
}

Thử ngay

Nhóm nút dọc

Sử dụng display:block Thay thế float:left Chia nhóm nút theo chiều dọc而不是 theo chiều ngang:

Mẫu

.button {
  display: block;
}

Thử ngay

Nút trên hình ảnh

Cà phê

Thử ngay

Nút animation

Mẫu 1

Thêm mũi tên khi trỏ chuột:

Thử ngay

Mẫu 2

Thêm hiệu ứng 'nút nhấn' khi nhấp chuột:

Thử ngay

Mẫu 3

Mờ vào khi trỏ chuột:

Thử ngay

Mẫu 4

Thêm hiệu ứng 'nước ripples' khi nhấp chuột:

Thử ngay