Notification Badge Css Class




In this blog post I will present you a simple badge Notification CSS Class
Create an HTML file named index.html and stylesheet and a stylesheet, style.css
-Into the HTML File paste the code below

 <!DOCTYPE html>  
 <html>  
  <head>  
  </head>  
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  
  <body>  
   <h1>Tuto4free</h1>  
      <button class="btn btn-success bdg" nbr=10>Messages</button>       
      <button class="btn btn-success bdg" nbr=2>updates</button>       
      <button class="btn btn-success bdg" nbr=4>settings</button>       
      <h3><a href="www.tuto4free.com">www.tuto4free.com</a></h3>  
  </body>  
 </html>

-Into the CSS File paste the code below 
 .bdg{  
      position : relative;  
 }  
 .bdg[nbr]:after{  
   content:attr(nbr);  
   position:absolute;  
   background:red;  
   width:20px;  
   height:20px;  
   top:-10px;  
   right:2px;  
   border-radius:50%;  
   box-shadow : 0 0 1px #33333  
 }




Download

Khebbou