Dark code
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JAVA JQUERY
Tutorials
Image Comparison Slider References Exercises Videos Pro Get Certified Free Website Log in
Favicon
Buttons
Alert Buttons
Outline Buttons
Split Buttons NEW
Animated Buttons
How TO - Notification Buttons
Fading Buttons We just launched
W3Schools videos
Button on Image
Social Media Buttons
Read More Read Less ❮ Previous Next ❯
Loading Buttons
Download Buttons
Pill Buttons Learn how to create notification buttons with CSS.
Notification Button Explore now
Icon Buttons 3
Next/prev Buttons Inbox
More Button in Nav COLOR PICKER
Block Buttons
Text Buttons
Round Buttons How To Create a Notification Button
Scroll To Top Button
Step 1) Add HTML:
Example
Get certified
<a href="#" class="notification"> by completing
<span>Inbox</span>
a course today!
<span class="badge">3</span>
</a>
school
w3 s
2
CE
02
TI 2
R
FI .
ED
Step 2) Add CSS:
Get started
Example
.notification {
background-color: #555; CODE GAME
color: white;
text-decoration: none;
padding: 15px 26px;
position: relative;
display: inline-block;
border-radius: 2px;
}
.notification:hover {
background: red;
}
.notification .badge { Play Game
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background: red;
color: white;
}
Try it Yourself »
Go to our CSS Buttons Tutorial to learn more about how to style buttons.
❮ Previous Next ❯
Report Error Spaces Pro Buy Certificate
Top Tutorials Top References Top Examples Get Certified
HTML Tutorial HTML Reference HTML Examples HTML Certificate
CSS Tutorial CSS Reference CSS Examples CSS Certificate
JavaScript Tutorial JavaScript Reference JavaScript Examples JavaScript Certificate
How To Tutorial SQL Reference How To Examples Front End Certificate
SQL Tutorial Python Reference SQL Examples SQL Certificate
Python Tutorial W3.CSS Reference Python Examples Python Certificate
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples PHP Certificate
Bootstrap Tutorial PHP Reference Bootstrap Examples jQuery Certificate
PHP Tutorial HTML Colors PHP Examples Java Certificate
Java Tutorial Java Reference Java Examples C++ Certificate
C++ Tutorial Angular Reference XML Examples C# Certificate
jQuery Tutorial jQuery Reference jQuery Examples XML Certificate
FORUM | ABOUT
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly
reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie
and privacy policy.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.
