Badges

Parte da seção Frontend Prático 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 geralmente são 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 selo simples:

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

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

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

.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 emblema 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 emblemas que apareçam no canto superior direito de cada botão usando apenas CSS. Sua tarefa:

Defina a posição do emblema: use position: absolute para poder posicioná-lo em relação ao botão.
Posicione-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;.
Deixe-o circular e adicione profundidade: use border-radius e uma pequena sombra de caixa (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

REQUIRED OUTPUT FORMAT: [Your translated content here]

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>