Create a button with a notification bubble with CSS

Whether in a dashboard or for a notification system, a button displaying the number of events at a glance is truly a must-have for enhancing your users' experience. Let's explore together in this article how to create one easily.

Step 1

Let's start with the HTML code.

<a href="#">
  Messages
  <span>3</span>
</a>

We simply add a link to our page. The span tag will be our notification bubble.

Step 2

Let's style the link and its hover effect.

a {
  position: relative;
  color: white;
  border: 2px solid #FF4754;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all 0.2s;
}

a:hover {
  background-color: #FF4754;
}

In the previous step, we use Flexbox (display: flex) to center the content text in our notification bubble both horizontally and vertically.

We give it a 4px border of the page's background color to give the impression that the notification is not directly attached to the border of our button.

Step 3

Now, let's style the notification bubble.

a span {
  position: absolute;
  top: -1rem;
  right: -1rem;
  background: #FF4754;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #121212;
  border-radius: 50%;
}

In the previous step, we use Flexbox to center the content text in our notification bubble both horizontally and vertically.

We give it a 4px border of the page's background color to give the impression that the notification is not directly attached to the border of our button.

Finally, we set our notification bubble's position: absolute to place it perfectly in the corner of our button.