11 CSS Notifications

Collection of free HTML and CSS notification code examples: boxes, badges, etc.

Table of Contents

1. Notification Boxes
2. Notification Badges

Related Articles

1. CSS Modal Windows
2. jQuery Modal/Dialog Windows

Notification Boxes

HTML and CSS notification box code examples (5 items).

Author

• Veronica
• June 6, 2018

Links

• demo and code

Made with

• HTML / CSS / JavaScript

About the code

Toast Messages with Remove Animation

Toast Messages UI components with jquery remove animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Author

• Julie Park
• May 22, 2018

Links

• demo and code

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: -

Author

• Damián Muti
• June 10, 2017

Links

• demo and code

Made with

• HTML / CSS (SCSS) / JavaScript

About the code

CSS-only Notifications Component

This is a Sass mixin that provides notifications functionality using little-to-none Javascript. It makes use of CSS transitions and animations to display notifications as popups or bars on different locations of the viewport. The best thing is that it is fully customizable and easy to use.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Author

• Maeve
• May 22, 2015

Links

• demo and code

Made with

• HTML / CSS

About the code

CSS Animated Web Notification

HTML and CSS web notification animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Hampus Persson
• April 8, 2014

Links

• demo and code

Made with

• HTML / CSS (SCSS) / JavaScript

About the code

CSS Notifications

Growl style notifications for a web app.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Notification Badges

HTML and CSS notification badge code examples (6 items).

Author

• DevTips
• July 29, 2016

Links

• demo and code

Made with

• HTML (Pug) / CSS (Sass) / JavaScript

About the code

Notifications, Alerts, Modals

Animated notifications, alerts and modals.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Author

• Vijaya Kumar Vulchi
• April 15, 2016

Links

• demo and code

Made with

• HTML / CSS

About the code

Only CSS Notification Alert

Simple notification alert with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Ryan Morr
• June 16, 2015

Links

• demo and code

Made with

• HTML / CSS / JavaScript

About the code

Notification Bell

Notification bell with badge.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Author

• Adam Mortka
• September 4, 2014

Links

• demo and code

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

Author

• Derek Wheelden
• January 13, 2014

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Pulsing Notification Badge

Just what it looks like.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Paul
• August 15, 2013

Links

• demo and code

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: -