Menu

Create a CSS Notification Badge

  1. Home
  2. Knowledge Base
  3. CSS
  4. Create a CSS Notification Badge

Create a CSS Notification Badge

Create a CSS Notification Badge

You have probably all seen notification badges somewhere, such as on smart phones or facebook, in this tutorial we are going to show you how to create theses badges with CSS and with the HTML data-attribute. These badges can be very effective in alerting the user to new things on your site.

badge-300x153

Ok, lets get down to it, first we will look at the HTML code that is required for the badges.

<button class="badge1" data-badge="6">Badge Notification Example</button>
<br>
<a href="" class="badge1" data-badge="27">Badge Notification Example</a>

Here you can see that we have used the HTML5 data-attribute name, this name can be anything you would like as long as it starts with ‘data-‘, as this is a CSS badge, we have decided to use ‘data-badge’.

That was the easy part of the badge, now we’ll look at the CSS code needed.

.badge1 {
   position:relative;
}
.badge1[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-10px;
   right:-10px;
   font-size:.7em;
   background:green;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}

What we are doing here is firstly with the .badge1 class is to give it a position of relative.
The second section of the CSS code is where we ‘create’ our badge, I’ll break down a few of the properties that we have used.
content – This is where we will get the value of our ‘data-badge’ attribute.
top & right – Used with the position property, this will set our badge at the top and right of the element.
background & color – Self explanatory…will set the background of our badge and the font color.
width & height – These properties will create the height and width of our badge.
text-align & line height – Will centre the text vertically and horizontally.
border-radius – This value will make our badge round.
box-shadow – Here we give our badge a shadow effect, we are just giving it a blur of 1px.

Was this article helpful?

Related Articles

Our Partners



Who’s Online

There are no users currently online