Post thumbnail: 11 CSS Notifications

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).

Demo image: Toast Messages with Remove Animation Toast Messages with Remove Animation - GIF Demo

Author

  • Veronica

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

Demo image: Flash Notification (Error/Success) Flash Notification (Error/Success) - GIF Demo

Author

  • Julie Park

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

Demo image: CSS-only Notifications Component

Author

  • Dami├ín Muti

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

Demo image: CSS Animated Web Notification CSS Animated Web Notification - GIF Demo

Author

  • Maeve

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

Demo image: CSS Notifications

Author

  • Hampus Persson

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).

Demo image: Notifications, Alerts, Modals Notifications, Alerts, Modals - GIF Demo

Author

  • DevTips

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

Demo image: Only CSS Notification Alert Only CSS Notification Alert - GIF Demo

Author

  • Vijaya Kumar Vulchi

Made with

  • HTML / CSS

About the code

Only CSS Notification Alert

Simple notification alert with CSS.

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

Dependencies: -

Demo image: Notification Bell Notification Bell - GIF Demo

Author

  • Ryan Morr

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

Demo image: CSS Circle Notifications CSS Circle Notifications - GIF Demo

Author

  • Adam Mortka

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

Demo image: Pulsing Notification Badge Pulsing Notification Badge - GIF Demo

Author

  • Derek Wheelden

Made with

  • HTML / CSS (SCSS)

About the code

Pulsing Notification Badge

Just what it looks like.

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

Dependencies: -

Demo image: Hop Over Notification Badge Hop Over Notification Badge - GIF Demo

Author

  • Paul

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

back to top