Notification Badge is the most important part of the webpage. You have probably seen notification badges somewhere, such as on Ecommerce sites, and Social Media Sites like: Facebook, twitter, LinkedIn etc.
So, in this tutorial I am going to show you “how to create theses badges with CSS and with HTML data-attribute”. These badges can be very effective in alerting the user to new things on your site.
There are create Two types Notification Badge. First is simple box inside text and second is with icon.
Let's get down to it, first will look at the html code is required the badges.
Styling part is the easiest part of the Notification badge, Let’s look at the CSS code needed.
What we are doing here is that, first we need to give relative position to the .btn class. Second section is to create the badges, Using <span></span> tag we will add .badge-corner class and give position absolute and some other property that we will use isisis top & right , background & color, border & radius, width & height, etc.