Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Syntax
.notificationContainer {
position: relative;
display: inline-block;
}
.notificationBadge {
position: absolute;
top: -10px;
right: -10px;
border-radius: 50%;
}
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: Arial, sans-serif;
margin: 50px;
}
.notificationContainer {
margin: 20px;
background-color: #007bff;
color: white;
text-decoration: none;
padding: 15px 26px;
font-size: 18px;
position: relative;
display: inline-block;
border-radius: 5px;
border: none;
cursor: pointer;
}
.notificationContainer:hover {
background-color: #0056b3;
}
.notificationBadge {
position: absolute;
top: -8px;
right: -8px;
padding: 4px 8px;
border-radius: 50%;
background-color: #dc3545;
color: white;
font-size: 12px;
font-weight: bold;
min-width: 18px;
text-align: center;
}
</style>
</head>
<body>
<h2>Notification Button Example</h2>
<a href="#" class="notificationContainer">
<span>Messages</span>
<span class="notificationBadge">5</span>
</a>
<a href="#" class="notificationContainer">
<span>Notifications</span>
<span class="notificationBadge">99+</span>
</a>
</body>
</html>
Two blue notification buttons appear on the page. The first shows "Messages" with a red badge showing "5", and the second shows "Notifications" with a red badge showing "99+". The badges are positioned at the top-right corner of each button. Hovering over the buttons changes their color to a darker blue.
Conclusion
Creating notification buttons with CSS involves using relative positioning for the container and absolute positioning for the badge. The key is positioning the badge with negative top and right values to place it outside the button boundaries.
683 Views
