How to Create Badges using HTML and CSS ?

Last Updated : 27 Dec, 2023

This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that they have more rounded corners.

HTML is used to create the basic structure of the badge and CSS properties add styles to the elements.

Example 1: In this example, we will create the badge with HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <title>
        How to Create a Badge using HTML and CSS?
    </title>
 
    <style>
        .container {
            text-align: center;
        }
 
        .badge {
            background-color: green;
            color: #fff;
            font-size: 0.8em;
            padding: 5px 10px;
            border-radius: 4px;
            margin-left: 5px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h2>
            GeeksforGeeks
            <span class="badge">New</span>
        </h2>
 
        <h3>
            GeeksforGeeks
            <span class="badge">New</span>
        </h3>
 
        <h4>
            GeeksforGeeks
            <span class="badge">New</span>
        </h4>
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we will create the badge with HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
     
    <title>
         
    </title>
 
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
        }
 
        .btn {
            color: green;
            display: inline-block;
            padding: 0.375rem 0.75rem;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 0.25rem;
        }
 
        .badge {
            display: inline-block;
            padding: 0.25em 0.5em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
        }
 
        .secondary {
            background-color: #6c757d;
            color: #fff;
        }
 
        .warning {
            background-color: #ffc107;
            color: #212529;
        }
 
        .danger {
            background-color: #dc3545;
            color: #fff;
        }
 
        button {
            margin: 10px;
        }
    </style>
</head>
 
<body>
    <button type="button" class="btn">
        Notifications
        <span class="badge secondary">4</span>
    </button>
    <button type="button" class="btn">
        Messages
        <span class="badge warning">10</span>
    </button>
    <button type="button" class="btn">
        Updates
        <span class="badge danger">2</span>
    </button>
</body>
 
</html>