How to Create Notification Buttons using CSS?
Notification buttons are frequently used in web applications to inform users of new messages, updates, or alerts. These buttons typically feature a badge or icon that displays the number of notifications, enhancing user awareness and engagement. Here we will create notification buttons using CSS.
Approach
- The code creates a simple HTML document with a button element containing a badge indicating the number of notifications.
- The Font Awesome library is linked to provide the icon.
- Styles the button with properties such as background color, padding, font size, and rounded corners.
- The button’s background color changes on hover using the hover selector.
- Style the notification badge, positioning it in the top-right corner of the button and giving it distinct colors and rounded corners.
- The
@keyframesrule defines an animation that scales the button from its original size to 110%.
Example 1: This example shows how to create a notification button with an icon we use the <button> element as the notification button. Inside the button, an <i> element is used to display the bell icon and the <span> element acts as a badge which used to display the notification count.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Icon Notification Button</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.icon-button {
position: relative;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
background-color: green;
}
.icon-button:hover {
background-color: #0b7dda;
}
.badge {
position: absolute;
top: -5px;
right: -5px;
background-color: #ff9800;
color: white;
font-size: 12px;
padding: 3px 6px;
border-radius: 50%;
}
</style>
</head>
<body>
<button class="icon-button">
<i class="fas fa-bell"></i>
<span class="badge">3</span>
</button>
</body>
</html>
Output:
Output
Example 2: In the below example “.animated-button” class adds a pulsing effect using keyframes, and the “.badge” class positions a notification badge in the top-right corner of the button. The badge displays a notification count.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Animated Notification Button</title>
<style>
.animated-button {
position: relative;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
animation: pulse 1s infinite alternate;
}
.animated-button:hover {
background-color: #45a049;
}
.badge {
position: absolute;
top: 0;
right: 0;
background-color: #ff9800;
color: white;
font-size: 12px;
padding: 3px 6px;
border-radius: 50%;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<h3>Creating animated notification buttons</h3>
<button class="animated-button">
Notification
<span class="badge">4</span>
</button>
</body>
</html>
Output:
Output