Badges

Parte da seção Practical Frontend do Journey de HTML da Coddy. Lição 22 de 35.

Badges são pequenos indicadores usados para mostrar contagens ou status ao lado de outro elemento. Exemplo: um círculo vermelho com um número mostrando mensagens não lidas. Eles são frequentemente anexados a botões, ícones ou fotos de perfil.

Por que eles são importantes:

Eles tornam informações importantes (como notificações) rapidamente visíveis.
Comumente usados em aplicativos, redes sociais e sites de e-commerce.

Vamos criar um badge simples:

Primeiro, crie um elemento HTML básico para conter seu badge:

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

Em seguida, adicione um pouco de CSS básico para estilizar o badge:

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

Com isso, o badge fica no canto do botão mostrando o número de mensagens.

Desafio

Fácil

Você recebeu um HTML com vários botões. Sua tarefa é criar badges que apareçam no canto superior direito de cada botão usando apenas CSS. Sua tarefa:

Defina a posição do badge: Use position: absolute para que você possa posicioná-lo em relação ao botão.
Coloque-o no canto superior direito: Use valores negativos para top e right.
Defina as cores e o texto: Use um fundo vermelho e texto branco.
Ajuste a fonte e o preenchimento: Defina font-size: 12px; font-weight: bold; padding: 4px 7px;.
Torne-o circular e adicione profundidade: Use border-radius e uma pequena sombra (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

Experimente você mesmo

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