Huy hiệu

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 22 trên 35.

Huy hiệu là chỉ báo nhỏ dùng để hiển thị số lượng hoặc trạng thái bên cạnh một phần tử khác. Ví dụ: một hình tròn màu đỏ có số cho biết số tin nhắn chưa đọc. Chúng thường được gắn vào nút, biểu tượng hoặc ảnh hồ sơ.

Vì sao chúng quan trọng:

Chúng giúp bạn nhanh chóng nhìn thấy thông tin quan trọng, chẳng hạn như thông báo.
Chúng thường được dùng trong ứng dụng, mạng xã hội và trang thương mại điện tử.

Hãy tạo một huy hiệu đơn giản:

Đầu tiên, hãy tạo một phần tử HTML cơ bản để chứa huy hiệu của bạn:

<button class="btn">
  Messages <span class="badge">5</span>
</button>

Tiếp theo, thêm một chút CSS cơ bản để tạo kiểu cho huy hiệu:

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

Nhờ vậy, huy hiệu nằm ở góc nút và hiển thị số lượng tin nhắn.

Thử thách

Dễ

Bạn được cung cấp HTML có một số nút. Nhiệm vụ của bạn là tạo huy hiệu chỉ bằng CSS, để chúng xuất hiện ở góc trên bên phải của mỗi nút. Nhiệm vụ của bạn:

Đặt vị trí của huy hiệu: Dùng position: absolute để bạn có thể đặt huy hiệu theo vị trí của nút.
Đặt huy hiệu ở góc trên bên phải: Dùng giá trị âm cho top và right.
Đặt màu sắc và văn bản: Dùng nền màu đỏ và chữ màu trắng.
Điều chỉnh phông chữ và khoảng đệm: Đặt font-size: 12px; font-weight: bold; padding: 4px 7px;.
Để huy hiệu có hình tròn và tạo chiều sâu: Dùng border-radius và bóng đổ nhẹ (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Badges</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background-color: #f5f5f5;
      display: flex;
      gap: 20px;
    }

    .button {
      position: relative; /* needed for badge positioning */
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background-color: #4cafef;
      color: white;
      cursor: pointer;
    }

    .button:hover {
      background-color: #3a92d8;
    }

    .badge {
      
    }
  </style>
</head>
<body>

  <button class="button">
    Messages
    <span class="badge">5</span>
  </button>

  <button class="button">
    Notifications
    <span class="badge">!</span>
  </button>

  <button class="button">
    Cart
    <span class="badge">3</span>
  </button>

</body>
</html>