Lencana

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 22 dari 35.

Badge adalah indikator kecil yang digunakan untuk menunjukkan jumlah atau status di samping elemen lain. Contoh: lingkaran merah dengan angka yang menunjukkan pesan yang belum dibaca. Badge sering ditempelkan pada tombol, ikon, atau foto profil.

Mengapa ini penting:

Elemen ini membuat info penting (seperti notifikasi) cepat terlihat.
Umumnya digunakan di aplikasi, media sosial, dan situs e-commerce.

Mari buat lencana sederhana:

Pertama, buat elemen HTML dasar untuk menampung lencana kamu:

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

Selanjutnya, tambahkan CSS dasar untuk menata lencana:

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

Dengan ini, lencana berada di sudut tombol dan menampilkan jumlah pesan.

Tantangan

Mudah

Kamu diberi HTML dengan beberapa tombol. Tugasmu adalah membuat lencana yang muncul di sudut kanan atas setiap tombol hanya dengan CSS. Tugasmu:

Atur posisi lencana: Gunakan position: absolute agar kamu bisa menempatkannya relatif terhadap tombol.
Tempatkan di sudut kanan atas: Gunakan nilai negatif untuk top dan right.
Atur warna dan teks: Gunakan latar belakang merah dan teks putih.
Sesuaikan ukuran font dan padding: Atur font-size: 12px; font-weight: bold; padding: 4px 7px;.
Buat bentuknya melingkar dan tambahkan efek kedalaman: Gunakan border-radius dan bayangan kotak yang tipis (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

Coba sendiri

<!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>