Badges

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 22 von 35.

Badges sind kleine Indikatoren, die verwendet werden, um Zähler oder den Status neben einem anderen Element anzuzeigen. Beispiel: ein roter Kreis mit einer Zahl, der ungelesene Nachrichten anzeigt. Sie werden häufig an Schaltflächen, Symbole oder Profilbilder angehängt.

Warum sie wichtig sind:

Sie machen wichtige Informationen (wie Benachrichtigungen) schnell sichtbar.
Häufig verwendet in Apps, sozialen Medien und E-Commerce-Websites.

Erstellen wir ein einfaches Abzeichen:

Erstelle zuerst ein grundlegendes HTML-Element, das dein Abzeichen enthält:

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

Füge als Nächstes etwas grundlegendes CSS hinzu, um das Abzeichen zu gestalten:

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

Damit sitzt das Abzeichen an der Ecke der Schaltfläche und zeigt die Anzahl der Nachrichten an.

Aufgabe

Einfach

Dir wird HTML mit mehreren Schaltflächen gegeben. Deine Aufgabe besteht darin, Abzeichen zu erstellen, die mithilfe von CSS in der oberen rechten Ecke jeder Schaltfläche erscheinen. Deine Aufgabe:

Position des Abzeichens festlegen: Verwende position: absolute, damit du es relativ zur Schaltfläche platzieren kannst.
In der oberen rechten Ecke platzieren: Verwende negative Werte für top und right.
Farben und Text festlegen: Verwende einen roten Hintergrund und weißen Text.
Schriftart und Innenabstand anpassen: Setze font-size: 12px; font-weight: bold; padding: 4px 7px;.
Rund gestalten und Tiefe hinzufügen: Verwende border-radius und einen kleinen Schatten (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

REQUIRED OUTPUT FORMAT: [Dein übersetzter Inhalt hier]

Probier es selbst

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