CssHow-ToBeginner · 3 min read

How to Create Badge in CSS: Simple Steps and Example

To create a badge in CSS, use a small span or div with styles like background-color, color, border-radius, and padding to shape it. Position it using position: absolute inside a relative container to place it on top of another element.

📐

Syntax

A badge is usually a small element like a span styled with CSS properties:

background-color: sets the badge color.
color: sets the text color inside the badge.
border-radius: makes the badge rounded or circular.
padding: adds space inside the badge for better shape.
position: often absolute to place the badge over another element.
font-size: controls the size of the badge text.

html

<span class="badge">Badge</span>

💻

Example

This example shows a red circular badge with white text positioned at the top-right corner of a button.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Badge Example</title>
<style>
  .button {
    position: relative;
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    line-height: 1;
  }
</style>
</head>
<body>
<button class="button">
  Notifications
  <span class="badge">3</span>
</button>
</body>
</html>

Output

A blue button labeled 'Notifications' with a small red circular badge showing the number '3' at the top-right corner.

⚠️

Common Pitfalls

Common mistakes when creating badges include:

Not setting position: relative on the container, so the badge cannot be positioned correctly.
Using fixed sizes without padding, causing text to overflow or look cramped.
Forgetting border-radius, which makes badges look like plain rectangles instead of circles or pills.
Not using contrasting colors, making the badge text hard to read.

html

<!-- Wrong: No relative position on container -->
<button class="button">
  Messages
  <span class="badge">5</span>
</button>

<style>
  .button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
  }
  .badge {
    position: absolute; /* won't work properly without relative parent */
    top: -8px;
    right: -8px;
    background-color: green;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 0.75rem;
  }
</style>

<!-- Right: Add relative position to container -->
<button class="button-relative">
  Messages
  <span class="badge">5</span>
</button>

<style>
  .button-relative {
    position: relative;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
  }
</style>

📊

Quick Reference

Tips for creating badges in CSS:

Use position: relative on the parent container.
Use position: absolute on the badge to place it.
Use border-radius: 50% for circular badges.
Use padding and min-width for consistent size.
Choose contrasting colors for readability.

✅

Key Takeaways

Set the container to position relative to position the badge absolutely inside it.

Use background color, border-radius, padding, and font size to style the badge shape and text.

Position the badge with top and right properties for correct placement.

Ensure good color contrast for badge text readability.

Avoid fixed sizes without padding to keep badges flexible and neat.