CSS Button - Tùy Chỉnh Nút Bấm Chuyên Nghiệp

Nút bấm (button) là yếu tố tương tác quan trọng. CSS biến button mặc định đơn điệu thành nút đẹp, thu hút, phù hợp brand.

Tổng Quan Button HTML

2 cách tạo button: <button> hoặc <input type="button">. Kết quả giống nhau.

<button>Click me</button>

Button mặc định: nền trắng, chữ đen, khá xấu. CSS sẽ biến hình.

11 Kỹ Thuật Style Button

1. Background Color

.button { width: 100px; height: 50px; background-color: pink; }

2. Text Color

.button { background-color: pink; color: green; }

3. Font Size

.button { font-size: 20px; background: blue; color: white; }

4. Padding

Khoảng cách chữ đến viền. Không set width/height để padding tự mở rộng button.

.button1 { padding: 20px; }
.button2 { padding: 40px; }

5. Rounded Corners (Bo Góc)

.button1 { border-radius: 5px; }
.button2 { border-radius: 10px; }
.button3 { border-radius: 15px; }

Border-radius càng lớn → góc càng tròn.

6. Border Color

.button { 
  background: white; color: black; 
  border: 3px solid #ffb6c1; /* hồng nhạt */
  padding: 25px;
}

7. Hover Effect (:hover)

Thay đổi style khi di chuột qua.

.button { background: white; color: black; border: 3px solid #ffb6c1; padding: 25px; }
.button:hover { background: green; color: white; }

Thêm transition-duration: 1s; cho chuyển động mượt 1 giây.

8. Box Shadow

.button { 
  box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2); 
  /* x=0, y=10px, blur=10px, spread=0, màu xám nhạt */
}

9. Width

Ghi đè width mặc định (dựa trên text).

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

10. Disable Button (Vô Hiệu Hóa)

Giữ button hiển thị nhưng không click được.

.button2 { 
  opacity: 0.5; 
  cursor: not-allowed; 
  border: none;
}

opacity: 0.5 làm mờ, cursor: not-allowed hiện dấu cấm khi hover.

Tạo Button Groups (Nhóm Nút)

Horizontal Group (Ngang)

Dùng float: left.

.button { 
  background: #ffb6c1; color: black; padding: 25px; 
  border: none; float: left; 
}

Có border: border: 2px solid blue; để tách rõ từng nút.

Vertical Group (Dọc)

Dùng display: block.

.button { display: block; border: 2px solid blue; ... }

Animation Cho Button

Hiệu Ứng Nhấn (Pressed)

Click → button chìm xuống, đổi màu, bóng thay đổi.

.button {
  padding: 20px; font-size: 15px; color: white; background: lightblue;
  border: none; transition-duration: 0.5s; border-radius: 8px;
  box-shadow: 0 5px gray;
}
.button:active {
  background: #ffb6c1; box-shadow: 0 5px lightgray; 
  transform: translateY(5px); /* dịch xuống 5px */
}

Hiệu Ứng Fade-in Khi Hover

.button {
  opacity: 0.7; transition-duration: 0.5s; border-radius: 8px;
  background: lightblue; color: white; border: none; padding: 20px;
}
.button:hover { opacity: 1; }

Hover: từ mờ 0.7 → rõ 1 trong 0.5s.

Kết Luận

HTML tạo cấu trúc button, CSS tùy biến mọi khía cạnh: màu, chữ, padding, bo góc, viền, hover, shadow, width, disable, group, animation. Bạn đã có đủ công cụ tạo button chuyên nghiệp!