Badge using HTML and CSS

Leave a Comment / HTML / By Code Indoor Team

Today we will learn how to create a Badge using HTML and CSS. Badges are used to represent the number of items that the container contains, For example, we can show the number of items in the cart.

Badge html css output

As you saw in the above output we are creating the badge for the text “Code Indoor”.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tooltip</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <h3 class="badge" data-badge="10">Code Indoor</h3>
    </div>
  </body>
</html>

In the HTML code, we are creating a text and set the badge value to the data-badge data-attribute.

CSS Code

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

html,
body {
  font-family: "DM Sans", sans-serif;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #DDC1A7;
  
}

.badge {
  font-size: 1.4rem;
  font-weight: 500;
  color: #2F3B69;
  position: relative;
  background-color: #fff;
  padding: 4px 12px;
  border-radius: 5px;
  box-shadow: 3px -2px 24px -10px rgba(0,0,0,0.75);
}

.badge::before {
  content: attr(data-badge);
  font-size: 14px;
  position: absolute;
  left: 93%;
  bottom: 70%;
  background: #5C4E4E;
  padding: 4px 5px;
  color: #fff;
  border-radius: 50%;
}

In the CSS code, we are making a badge using the before pseudo-element and assigning the badge data to the content of the before element. Through this, we are creating a Badge component using HTML and CSS

Leave a Comment Cancel Reply