How To Create – Notification Buttons in html and Css

Hello friends in this article we will learn how to create notification buttons using html and css.

How To Create a Notification Button

Step-1 Add Html Code

  <a href="#" class="mynotification">
     <span>My Notification</span>
     <span class="notivalue">3</span>
   </a>

Step-2 Add Css Code

.mynotification {
     background-color: #f60;
     color: white;
     text-decoration: none;
     padding: 15px 26px;
     position: relative;
     display: inline-block;
     border-radius: 2px;
	 margin-top:10px;
}

.mynotification:hover {
  background:#333;
}

.mynotification .notivalue {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background:#0033FF;
  color: white;
  
}