In this post, we will learn how to create a notification button with CSS. Notification button is used for showing total number of unseen notifications to user. So how we can create notification button, we learn in this post.


How To Create A Notification Button With CSS ?


Create A Notification Button

To create a notification button, we use anchor tag to create button. In this anchor tag we use two span tags. The first span is used for button name and second span tag is used for showing notification number. After this we use CSS to style the notification button.


Complete code is given below:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Create A Notification Button With CSS ?</title>

<style>

.button {
background-color: #555;
color: white;
text-decoration: none;
padding: 15px 20px;
position: relative;
display: inline-block;
border-radius: 5px;
font-size: 18px;
}

.button:hover {
background: red;
}

.button .badge {
position: absolute;
top: -8px;
right: -8px;
padding: 5px 10px;
border-radius: 50%;
background-color: red;
color: white;
}

</style>
</head>
<body>

<h1>Notification Button</h1>

<a href="#" class="button">
<span>Notification</span>
<span class="badge">8</span>
</a>

</body>
</html> code-box



Summary

In this post we learned how to create a notification button with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post