25+ CSS Notifications - Free Code + Demos
Collection of 25+ CSS Notifications. All items are 100% free and open-source. The list also includes boxes css notifications.
1. Alert Message
Author: Swarup Kumar Kuila (uiswarup)
Links: Source Code / Demo
Created on: December 8, 2019
Made with: HTML, CSS
Tags: animation, css, bootstrap, 2020
2. Corner-shape - Augmented-UI - Prompt
Author: Rock Starwind (RockStarwind)
Links: Source Code / Demo
Created on: September 23, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, augmented-ui, corner-shape
3. New Alert Messages Bootstrap 3 Font Awesome
Author: Jaime (jimmycow)
Links: Source Code / Demo
Created on: February 15, 2019
Made with: HTML, SCSS
4. Pop Up Social Feed Notification
Author: Nooray Yemon (yemon)
Links: Source Code / Demo
Created on: July 3, 2018
Made with: HTML, CSS
5. Green And Red Flash Message (Error/Success)
error/success flash message card design with keyframes animations! Bouncing happy face for success message & rolling sad face for error message :) Hope you guys enjoy!
Author: Julie Park (juliepark)
Links: Source Code / Demo
Created on: May 22, 2018
Made with: HTML, SCSS
Tags: dailyui, success/error, flash message, ui-design, cards
6. Icons Sweet Alert Personnalisé
Author: KAM3LEON (Kam3leoN)
Links: Source Code / Demo
Created on: December 9, 2019
Made with: HTML, CSS, JS
7. Notification Bell Animation
Author: Benjamin Sterling (ben_sterling)
Links: Source Code / Demo
Created on: May 3, 2019
Made with: HTML, SCSS
8. Pulsing Notification
Just what it looks like.
Author: Derek Wheelden (frxnz)
Links: Source Code / Demo, Dribbble Shot
Created on: January 12, 2014
Made with: HTML, SCSS
Tags: css3, animation, keyframe, pulsing, notification
9. Only CSS Notification Alert
Author: Vijaya Kumar Vulchi (vulchivijay)
Links: Source Code / Demo
Created on: April 14, 2016
Made with: HTML, CSS
10. Circle Notifications
Author: Adam Mortka (amortka)
Links: Source Code / Demo
Created on: September 4, 2014
Made with: HTML, CSS
11. Pulsing Notification
Just what it looks like.
Author: Derek Wheelden (frxnz)
Links: Source Code / Demo
Created on: January 12, 2014
Made with: HTML, SCSS
Tags: css3, animation, keyframe, pulsing, notification
12. Hop Over Notification Badge
Hop over effect for notification-type badges using CSS3 transform and :hover
Author: Paul (plfstr)
Links: Source Code / Demo
Created on: August 15, 2013
Made with: HTML, CSS
Tags: css3, hover, transform, navigation, keyframes
13. Notification Bell
Design a notification component where an SVG icon is animated while a message is introduced from the side. Entry for the 16th weekly coding challenge.
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: July 11, 2019
Made with: HTML, CSS, JS
Tags: weeklycodingchallenge, notification, svg, bell
14. Google Plus Loading Animation In Pure CSS
This animation is similar to what Google Plus show while opening notification bell ( ? ). This is created in pure CSS and using single DOM element so that any existing element can be used to show this animation by just toggling the class.
Author: Girish Sharma (grssam)
Links: Source Code / Demo
Created on: July 6, 2013
Made with: HTML, CSS
Tags: google-plus, loader, animation, css
15. Notification Bell Icon Layered Shake Animation Effect
Animated Google Material Design Icon. Three layers. CSS rotate transform and opacity animation effects.
Author: brian1983 (brian1983)
Links: Source Code / Demo
Made with: HTML, CSS
16. Pure Css Notification Bell Hover
Author: Gabriel Velez (Golez)
Links: Source Code / Demo
Created on: November 5, 2018
Made with: HTML, CSS
17. CSS3 Menu With Notification Badges
source http://cssdeck.com/labs/menu-with-notification-badges
Author: ittik (ittik)
Links: Source Code / Demo
Created on: May 4, 2019
Made with: HTML, CSS
18. Pop Up Social Feed Notification
Author: ycr4zy (ycr4zy)
Links: Source Code / Demo
Created on: April 6, 2019
Made with: HTML, CSS
19. Notification Flash Message
An animated flash message notification
Author: arthurra (arthurra)
Links: Source Code / Demo
Created on: October 18, 2014
Made with: Slim, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: flash message, alert, notification, bounce, success
20. Notification Bell
Author: mitsuruog (mitsuruog)
Links: Source Code / Demo
Created on: June 20, 2017
Made with: HTML, SCSS
21. CSS Animated Notification Badge
CSS3 animated notification badge which animates on value change
Author: sjmcpherson (sjmcpherson)
Links: Source Code / Demo
Created on: October 6, 2013
Made with: HTML, CSS, JS
Tags: menu, badge, notification, css3-animation
22. Notification Bell
Author: Joana Pereira (joanaborges)
Links: Source Code / Demo
Created on: September 16, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: notification, animation, css-only, microinteraction
Notification Boxes
1. Alert Message
Author: Swarup Kumar Kuila (uiswarup)
Links: Source Code / Demo
Created on: December 8, 2019
Made with: HTML, CSS
Tags: animation, css, bootstrap, 2020
2. Corner-shape - Augmented-UI - Prompt
Author: Rock Starwind (RockStarwind)
Links: Source Code / Demo
Created on: September 23, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, augmented-ui, corner-shape
3. New Alert Messages Bootstrap 3 Font Awesome
Author: Jaime (jimmycow)
Links: Source Code / Demo
Created on: February 15, 2019
Made with: HTML, SCSS
4. Pop Up Social Feed Notification
Author: Nooray Yemon (yemon)
Links: Source Code / Demo
Created on: July 3, 2018
Made with: HTML, CSS
5. Green And Red Flash Message (Error/Success)
error/success flash message card design with keyframes animations! Bouncing happy face for success message & rolling sad face for error message :) Hope you guys enjoy!
Author: Julie Park (juliepark)
Links: Source Code / Demo
Created on: May 22, 2018
Made with: HTML, SCSS
Tags: dailyui, success/error, flash message, ui-design, cards
Notification Badges
1. Icons Sweet Alert Personnalisé
Author: KAM3LEON (Kam3leoN)
Links: Source Code / Demo
Created on: December 9, 2019
Made with: HTML, CSS, JS
2. Notification Bell Animation
Author: Benjamin Sterling (ben_sterling)
Links: Source Code / Demo
Created on: May 3, 2019
Made with: HTML, SCSS
3. Pulsing Notification
Just what it looks like.
Author: Derek Wheelden (frxnz)
Links: Source Code / Demo, Dribbble Shot
Created on: January 12, 2014
Made with: HTML, SCSS
Tags: css3, animation, keyframe, pulsing, notification
4. Only CSS Notification Alert
Author: Vijaya Kumar Vulchi (vulchivijay)
Links: Source Code / Demo
Created on: April 14, 2016
Made with: HTML, CSS
5. Circle Notifications
Author: Adam Mortka (amortka)
Links: Source Code / Demo
Created on: September 4, 2014
Made with: HTML, CSS
6. Pulsing Notification
Just what it looks like.
Author: Derek Wheelden (frxnz)
Links: Source Code / Demo
Created on: January 12, 2014
Made with: HTML, SCSS
Tags: css3, animation, keyframe, pulsing, notification
7. Hop Over Notification Badge
Hop over effect for notification-type badges using CSS3 transform and :hover
Author: Paul (plfstr)
Links: Source Code / Demo
Created on: August 15, 2013
Made with: HTML, CSS
Tags: css3, hover, transform, navigation, keyframes
More Awesome Lists:
Share: