Badges

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 22 de 35.

Las insignias son pequeños indicadores utilizados para mostrar recuentos o estados junto a otro elemento. Ejemplo: un círculo rojo con un número que muestra mensajes no leídos. A menudo se adjuntan a botones, iconos o fotos de perfil.

Por qué son importantes:

Hacen que la información importante (como las notificaciones) sea visible rápidamente.
Se utilizan comúnmente en aplicaciones, redes sociales y sitios web de comercio electrónico.

Vamos a crear una insignia sencilla:

Primero, crea un elemento HTML básico para contener tu insignia:

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

A continuación, añade un poco de CSS básico para dar estilo a la insignia:

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

Con esto, la insignia se sitúa en la esquina del botón mostrando el número de mensajes.

Desafío

Fácil

Se te proporciona un HTML con varios botones. Tu tarea es crear insignias (badges) que aparezcan en la esquina superior derecha de cada botón utilizando solo CSS. Tu tarea:

Establece la posición de la insignia: Usa position: absolute para que puedas colocarla en relación con el botón.
Colócala en la esquina superior derecha: Usa valores negativos para top y right.
Establece los colores y el texto: Usa un fondo rojo y texto blanco.
Ajusta la fuente y el relleno: Establece font-size: 12px; font-weight: bold; padding: 4px 7px;.
Hazla circular y añade profundidad: Usa border-radius y una pequeña sombra de caja (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

Hoja de referencia

Las insignias (badges) son pequeños indicadores utilizados para mostrar conteos o estados junto a otro elemento, comúnmente adjuntos a botones, iconos o fotos de perfil.

Estructura HTML básica:

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

Estilo CSS para insignias:

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

Propiedades clave:

position: absolute - permite un posicionamiento preciso relativo al padre
Valores negativos de top y right - posicionan la insignia fuera del elemento padre
border-radius: 50% - crea una forma circular
box-shadow - añade profundidad y separación visual

Pruébalo tú mismo

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