MATERIAL ALERT MODAL

See the Pen material alert modal by Cornelius Labuschagne (@corneliuslabuschagne) on CodePen.light

Author

  • Cornelius Labuschagne

Made with

  • HTML / CSS (SCSS)

ALERT MESSAGE

Animated Bootstrap alert messages.

See the Pen alert message by Swarup Kumar Kuila (@uiswarup) on CodePen.light

Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

NOTIFICATION UI

See the Pen Evangelizing corner-shape #1, powered by Augmented-UI: Prompt by Rock Starwind (@RockStarwind) on CodePen.light

Author

  • Rock Starwind

Made with

  • HTML (Pug) / CSS (SCSS)

MESSAGES BOOTSTRAP 3

New alert messages Bootstrap 3 with Font-Awesome.

See the Pen New alert messages bootstrap 3 font awesome by Jaime (@jimmycow) on CodePen.light

Author

  • Jaime

Made with

  • HTML / CSS (SCSS)

POP UP SOCIAL FEED NOTIFICATION

See the Pen Pop up social feed notification by Nooray Yemon (@yemon) on CodePen.light

Author

  • Nooray Yemon

Made with

  • HTML / CSS

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.

See the Pen Daily UI#011 | Flash Message (Error/Success) by Julie Park (@juliepark) on CodePen.light

Author

  • Julie Park

Made with

  • HTML / CSS (SCSS)

CSS ANIMATED WEB NOTIFICATION

HTML and CSS web notification animation.

See the Pen CSS Animated Web Notification by Maeve (@vcmg) on CodePen.light

Author

  • Maeve

Made with

  • HTML / CSS

ICONS SWEET ALERT

Icons sweet alert: alert, warning, info, success.

See the Pen Icons Sweet Alert Personnalisé by KAM3LEON (@Kam3leoN) on CodePen.light

Author

  • KAM3LEON

Made with

  • HTML / CSS

NOTIFICATION ANIMATION

See the Pen Notification Animation ❤️ by anhat.dev (@nhatanh17) on CodePen.light

Author

  • nhatanh17

Made with

  • HTML / CSS

NOTIFICATION BELL ANIMATION

See the Pen Notification bell animation by Benjamin Sterling (@ben_sterling) on CodePen.light

Author

  • Benjamin Sterling

Made with

  • HTML / CSS (SCSS)

NOTIFICATION BADGE

A notification badge to show really important emergency messages.

See the Pen Notification Badge III by Gokul S (@iamsgokul) on CodePen.light

Author

  • Gokul S

Made with

  • HTML / CSS

ONLY CSS NOTIFICATION ALERT

Simple notification alert with CSS.

See the Pen Only CSS Notification alert by Vijaya Kumar Vulchi (@vulchivijay) on CodePen.light

Author

  • Vijaya Kumar Vulchi

Made with

  • HTML / CSS

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

See the Pen Circle notifications by Adam Mortka (@amortka) on CodePen.light

Author

  • Adam Mortka

Made with

  • HTML / CSS

PULSING NOTIFICATION BADGE

Just what it looks like.

See the Pen Pulsing Notification by Derek Wheelden (@frxnz) on CodePen.light

Author

  • Derek Wheelden

Made with

  • HTML / CSS (SCSS)

HOP OVER NOTIFICATION BADGE

Hop over effect for notification-type badges using CSS3 transform and :hover.

See the Pen Hop Over Notification Badge by Paul (@plfstr) on CodePen.light

Author

  • Paul

Made with

  • HTML / CSS

Categorized in: