Top 15 CSS Notifications

MATERIAL ALERT MODAL

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

ALERT MESSAGE

Animated Bootstrap alert messages.

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

NOTIFICATION UI

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

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

POP UP SOCIAL FEED NOTIFICATION

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

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

CSS ANIMATED WEB NOTIFICATION

HTML and CSS web notification animation.

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

ICONS SWEET ALERT

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

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

NOTIFICATION ANIMATION

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

NOTIFICATION BELL ANIMATION

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

NOTIFICATION BADGE

A notification badge to show really important emergency messages.

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

ONLY CSS NOTIFICATION ALERT

Simple notification alert with CSS.

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

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

PULSING NOTIFICATION BADGE

Just what it looks like.

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

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