Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create notification buttons with CSS?
A notification button includes a separate text on the top-right i.e., a badge with the number of notifications. Notifications are like pending messages waiting to be read. Once you read, the count of the notification i.e., the pending message will decrease. We can easily create such a button look-alike with the notification’s icon using HTML and CSS.
Create the notifications container
A container div is created to include the message as well as the notifications badge. Both of them are set in the <a> element −
<a href="#" class="notificationContainer"> <span>Messages</span> <span class="notificationBadge">99+</span> </a>
Position the notifications counter
To position the container, set the position property to relative. With that, the text-decoration property is set to none to remove the underline from the link −
.notificationContainer {
margin: 20px;
background-color: rgb(254, 255, 171);
color: black;
text-decoration: none;
padding: 15px 26px;
font-size: 32px;
position: relative;
display: inline-block;
border-radius: 2px;
border:2px solid black;
}
Position the notification badge
The badge on the top-right of the notification button is styled like this. The position is absolute. With that, it is positioned correctly using the top and right properties −
.notificationContainer .notificationBadge {
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background-color: rgb(0, 170, 51);
color: white;
}
Example
The following is the code to create notification buttons with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: monospace,serif,sans-serif;
}
.notificationContainer {
margin: 20px;
background-color: rgb(254, 255, 171);
color: black;
text-decoration: none;
padding: 15px 26px;
font-size: 32px;
position: relative;
display: inline-block;
border-radius: 2px;
border:2px solid black;
}
.notificationContainer:hover {
background: rgb(43, 8, 138);
color:white;
}
.notificationContainer .notificationBadge {
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background-color: rgb(0, 170, 51);
color: white;
}
</style>
</head>
<body>
<h1>Notification Button Example</h1>
<a href="#" class="notificationContainer">
<span>Messages</span>
<span class="notificationBadge">99+</span>
</a>
</body>
</html>
358 Views
