How to Create Notification Buttons using CSS? Last Updated : 17 May, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. ApproachThe 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 @keyframes rule 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. HTML <!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: OutputExample 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. HTML <!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 Comment More infoAdvertise with us Next Article How to Create Neon Light Button using HTML and CSS? Y yuvraj07 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to create Text Buttons using CSS ? In this article, we are going to see how to create text buttons using CSS. The text button is a button that appears to be text but acts as a button if we press it. Text buttons are different from anchor tags even if they might look similar. To create text buttons first, we create simple buttons in H 2 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read How to create a shinny button using HTML and CSS ? Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c 3 min read How to Create a Ribbon using CSS? In this article, we will learn how to create a ribbon using CSS.PrerequisitesHTMLCSSApproachThe structure consists of a <button> element with the class "btn" containing the text "GFG DSA Course". Inside the button, there is an <span> element with the class "ribbon" containing the text "N 2 min read How to create a Menu Icon using CSS ? The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c 3 min read How to style outline buttons using CSS ? This article will explore how to style outline buttons using CSS. The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect in two different 3 min read Like