CSS - Nút: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của các nút CSS. Cuối bài hướng dẫn này, bạn sẽ có thể tạo ra các nút không chỉ hoạt động tốt mà còn trông rất đẹp mắt. Hãy cùng bắt đầu nhé!

CSS Nút - Ví dụ cơ bản

Hãy bắt đầu với một nút đơn giản. Dưới đây là HTML và CSS bạn cần:

<button class="basic-button">Nhấn tôi!</button>

.basic-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

Điều này sẽ tạo ra một nút xanh với chữ trắng. Thuộc tính padding cho nó một kích thước nhất định, trong khi cursor: pointer thay đổi con trỏ chuột thành hình bàn tay khi di chuột qua nút.

CSS Nút Màu sắc

Các nút có thể có bất kỳ màu sắc nào bạn muốn! Dưới đây là cách tạo ra các nút có màu sắc khác nhau:

<button class="blue-button">Xanh</button>
<button class="red-button">Đỏ</button>
<button class="yellow-button">Vàng</button>

.blue-button {background-color: #008CBA;}
.red-button {background-color: #f44336;}
.yellow-button {
  background-color: #ffeb3b;
  color: black;
}

Chú ý rằng chúng tôi đã sử dụng chữ đen cho nút vàng để đảm bảo khả năng đọc.

CSS Nút Kích thước

Bạn có thể dễ dàng tạo ra các nút có kích thước khác nhau bằng cách điều chỉnh font-size và padding:

<button class="small-button"> Nhỏ </button>
<button class="medium-button"> Trung bình </button>
<button class="large-button"> Lớn </button>

.small-button {
  font-size: 12px;
  padding: 10px 24px;
}
.medium-button {
  font-size: 16px;
  padding: 12px 28px;
}
.large-button {
  font-size: 20px;
  padding: 14px 40px;
}

CSS Nút Padding

Padding rất quan trọng cho việc xác định kích thước của nút. Hãy thử nghiệm với các giá trị padding khác nhau:

<button class="padding-button1">Nút 1</button>
<button class="padding-button2">Nút 2</button>

.padding-button1 {
  padding: 10px 20px;
}
.padding-button2 {
  padding: 15px 40px;
}

Nhớ rằng giá trị đầu tiên là cho padding trên và dưới, giá trị thứ hai là cho padding bên trái và phải.

CSS Nút Bo tròn

Muốn làm mềm các góc sắc nhọn? Sử dụng border-radius:

<button class="rounded-button">Bo tròn</button>

.rounded-button {
  border-radius: 12px;
}

Thử nghiệm với các giá trị khác nhau để đạt được độ tròn bạn mong muốn!

CSS Nút Đường viền Màu

Hãy thêm một số đường viền vào các nút của chúng ta:

<button class="border-button">Đường viền</button>

.border-button {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

Điều này tạo ra một nút trắng với đường viền xanh và chữ đen.

CSS Nút Hoverable

Tính tương tác rất quan trọng! Hãy làm cho các nút của chúng ta thay đổi khi di chuột qua:

<button class="hover-button">Hover tôi</button>

.hover-button {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
  transition: 0.3s;
}

.hover-button:hover {
  background-color: #008CBA;
  color: white;
}

Thuộc tính transition đảm bảo sự thay đổi màu sắc diễn ra mượt mà.

CSS Nút Bóng

Thêm chiều sâu cho các nút của bạn với bóng:

<button class="shadow-button">Bóng</button>

.shadow-button {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Thuộc tính box-shadow thêm hiệu ứng bóng vào nút.

CSS Nút Disabled

Đôi khi, bạn cần vô hiệu hóa các nút:

<button class="disabled-button" disabled>Vô hiệu hóa</button>

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

Thuộc tính opacity làm cho nút trông mờ đi, trong khi cursor: not-allowed thay đổi con trỏ chuột để cho biết nút không thể nhấn được.

CSS Nút Chiều rộng

Bạn có thể kiểm soát chiều rộng của nút bằng cách sử dụng phần trăm hoặc giá trị cố định:

<button class="full-width">Chiều rộng đầy đủ</button>
<button class="half-width">Chiều rộng nửa</button>

.full-width {
  width: 100%;
}
.half-width {
  width: 50%;
}

CSS Nút Nhóm

Nhóm các nút của bạn để có một的外观 đồng nhất:

<div class="button-group">
  <button>Trái</button>
  <button>Giữa</button>
  <button>Phải</button>
</div>

.button-group button {
  float: left;
}
.button-group button:not(:last-child) {
  border-right: none;
}

Điều này tạo ra một bộ nút được nhóm theo chiều ngang.

CSS Nút Nhóm Đường viền

Thêm đường viền vào các nhóm nút:

<div class="border-button-group">
  <button>Táo</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

.border-button-group button {
  border: 1px solid green;
  float: left;
}
.border-button-group button:not(:last-child) {
  border-right: none;
}

CSS Nút Nhóm Dọc

Bạn cũng có thể tạo ra các nhóm nút theo chiều dọc:

<div class="vertical-button-group">
  <button>Trên</button>
  <button>Giữa</button>
  <button>Dưới</button>
</div>

.vertical-button-group button {
  display: block;
  width: 100%;
}
.vertical-button-group button:not(:last-child) {
  border-bottom: none;
}

CSS Nút Trên Ảnh

Đặt các nút lên ảnh để tạo ra hiệu ứng bắt mắt:

<div class="container">
  <img src="image.jpg" alt="Ảnh">
  <button class="btn">Nút</button>
</div>

.container {
  position: relative;
  width: 100%;
}
.container img {
  width: 100%;
  height: auto;
}
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

CSS Nút Hoạt hình

Hãy thêm một số hoạt hình vào các nút của chúng ta:

<button class="animated-button">Hoạt hình</button>

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.animated-button {
  animation: pulse 2s infinite;
}

Điều này tạo ra hiệu ứng nhấp nháy trên nút.

CSS Nút Hiệu ứng Nhấn

Mô phỏng hiệu ứng nhấn bằng CSS:

<button class="press-button">Nhấn tôi</button>

.press-button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Nút sẽ trông như thể di chuyển xuống khi được nhấn.

CSS Nút Hiệu ứng Mờ dần

Tạo hiệu ứng mờ dần cho các nút của bạn:

<button class="fade-in-button">Mờ dần vào</button>

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in-button {
  animation: fadeIn 2s;
}

Nút này sẽ mờ dần khi trang tải.

CSS Nút Hiệu ứng V풆ng

Cuối cùng, hãy tạo hiệu ứng v풆ng:

<button class="ripple">V풆ng</button>

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.ripple:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

Điều này tạo ra hiệu ứng v풆ng khi nút được nhấn.

Và thế là xong! Bây giờ bạn đã có kiến thức để tạo ra nhiều loại nút CSS khác nhau. Nhớ rằng, thực hành là cách tốt nhất để trở thành người thợ lành nghề, vì vậy đừng ngần ngại thử nghiệm với các phong cách này và tạo ra các nút độc đáo của riêng bạn. Chúc bạn may mắn với lập trình!

Credits: Image by storyset