Collection of free HTML and CSS notification and alert code examples: boxes, badges, etc. Update of January 2020 collection. 2 new items.
Related Articles
Table of Contents
Notification Boxes
HTML and CSS notification box code examples (5 items).
Links
Made with
- HTML / CSS
About a code
Alert Message
Animated Bootstrap alert messages.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, font-awesome.css
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Notification UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: augmented.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Messages Bootstrap 3
New alert messages Bootstrap 3 with Font-Awesome.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, font-awesome.css
Links
Made with
- HTML / CSS
About a code
Pop Up Social Feed Notification
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Flash Notification (Error/Success)
Error/success flash notification card design with keyframes animations! Bouncing happy face for success message & rolling sad face for error message.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
CSS Animated Web Notification
HTML and CSS web notification animation.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Notification Badges
HTML and CSS notification badge code examples (6 items).
Links
Made with
- HTML / CSS (SCSS)
About a code
Mail Notification
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Notification Bell Icon Layered Shake Animation Effect
Animated Google Material Design icon. Three layers. CSS rotate transform and opacity animation effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Icons Sweet Alert
Icons sweet alert: alert, warning, info, success.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Notification Bell Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Notification Badge
A notification badge to show really important emergency messages.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Only CSS Notification Alert
Simple notification alert with CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
CSS Circle Notifications
Move cursor over icon on the left to animate marks. To change mark color use following class's: .green, .blue. Marks are prepare to handle with two-digit numbers from 0 to 99. If your number is greater than 99 use logic to display 99+.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap-glyphicons.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Pulsing Notification Badge
Just what it looks like.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Hop Over Notification Badge
Hop over effect for notification-type badges using CSS3 transform and :hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -