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
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.

Check out our CSS Properties for examples of all the properties used here.

That’s it, I hope you enjoyed this tutorial, other things you could add would be classes to change the background color, plus you could add some other effects to the badge such as gradients.

If you want to check out a demo and play around with it a bit, just click on the button below.

Demo

7 Responses to Create a CSS Notification Badge

  1. Florian DUVAL says:

    Hi,

    a small trick to hide the badge if there is no content

    .badge1[data-badge=””]:after {
    content: none;
    }

    1. ADTC says:

      Sure, why not. PHP (server-side) or JavaScript/jQuery (client-side) should easily allow you to change the value programmatically.

  2. Michael says:

    Thnx for the badge, works great in feg: chrome and Florians addition works nicely too, but in IE11 the badge is there but only the part that is overlapping the button is visible, any ideas for those who need to use IE11 to get the correct result?

  3. ADTC says:

    If you don’t want to mess with data attributes, you can also use a span element inside the a or button element. It works the same way, except you don’t need the content property in the CSS.

Leave a Reply to Alessandro Cancel reply

Your email address will not be published. Required fields are marked *