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