Badges

Part of the Practical Frontend section of Coddy's HTML journey — lesson 22 of 35.

Badges are tiny indicators used to show counts or status next to another element. Example: a red circle with a number showing unread messages. They are often attached to buttons, icons, or profile pictures.

Why they matter:

They make important info (like notifications) quickly visible.
Commonly used in apps, social media, and e-commerce websites.

Let's create a simple badge:

First, create a basic HTML element to hold your badge:

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

Next, add some basic CSS to style the 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;
}

With this, the badge sits at the corner of the button showing the number of messages.

Challenge

Easy

You are given HTML with several buttons. Your task is to create badges that appear in the top-right corner of each button using only CSS. Your task:

Set the badge position: Use position: absolute so you can place it relative to the button.
Place it in the top-right corner: Use negative values for top and right.
Set the colors and text: Use a red background and white text.
Adjust the font and padding: Set font-size: 12px; font-weight: bold; padding: 4px 7px;.
Make it circular and add depth: Use border-radius and a small box shadow (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

Cheat sheet

Badges are tiny indicators used to show counts or status next to another element, commonly attached to buttons, icons, or profile pictures.

Basic HTML structure:

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

CSS styling for badges:

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

Key properties:

position: absolute - allows precise positioning relative to parent
Negative top and right values - positions badge outside parent element
border-radius: 50% - creates circular shape
box-shadow - adds depth and visual separation

Try it yourself

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