Collection of free HTML and CSS notification and alert code examples: boxes, badges, etc. Update of January 2020 collection. 2 new items.

Related Articles

  1. JavaScript Notifications
  2. jQuery Notifications
  3. React Notifications
  4. Vue Notifications

Table of Contents

  1. Notification Boxes
  2. Notification Badges

Notification Boxes

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

Author

  • Swarup Kumar Kuila

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

Author

  • Rock Starwind

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Notification UI

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

Responsive: yes

Dependencies: augmented.css

Demo image: Messages Bootstrap 3

Author

  • Jaime

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

Author

  • Nooray Yemon

Made with

  • HTML / CSS

About a code

Pop Up Social Feed Notification

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

Responsive: yes

Dependencies: -

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 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, Firefox, Opera, Safari

Dependencies: -

Notification Badges

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

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

Mail Notification

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

Responsive: no

Dependencies: -

Author

  • brian1983

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

Author

  • KAM3LEON

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

Author

  • Benjamin Sterling

Made with

  • HTML / CSS (SCSS)

About a code

Notification Bell Animation

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

Responsive: no

Dependencies: -

Author

  • Gokul S

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

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