16 CSS Floating Action Button Designs
Notification Badge
FAB with a pulsing red badge showing unread count — pure CSS. The badge uses a separate keyframe so the underlying button stays static.
Notification Badge the 10th of 16 designs in the 16 CSS Floating Action Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button type="button" class="cfb-badge" aria-label="Inbox, 3 unread">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M22 2 11 13" />
<path d="m22 2-7 20-4-9-9-4 20-7z" />
</svg>
<span class="cfb-badge-dot" aria-hidden="true">3</span>
</button> .cfb-badge {
position: relative;
width: 52px; height: 52px;
border: 0; border-radius: 50%;
background: linear-gradient(135deg, #06b6d4, #0ea5e9);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 16px rgba(6,182,212,0.35);
transition: transform 0.25s, box-shadow 0.25s;
}
.cfb-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(6,182,212,0.5); }
.cfb-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfb-badge-dot {
position: absolute; top: -4px; right: -4px;
min-width: 22px; height: 22px;
padding: 0 6px; border-radius: 999px;
background: #ff5d6c;
color: #fff;
font: 700 11px/22px 'JetBrains Mono', monospace;
text-align: center;
border: 2px solid #111118;
box-shadow: 0 0 0 0 rgba(255,93,108,0.7);
animation: cfb-badge-ping 1.6s ease-out infinite;
}
@keyframes cfb-badge-ping {
0%,100% { box-shadow: 0 0 0 0 rgba(255,93,108,0.6); }
50% { box-shadow: 0 0 0 8px rgba(255,93,108,0); }
}
@media (prefers-reduced-motion: reduce) {
.cfb-badge,
.cfb-badge * {
animation: none !important;
}
}
More from 16 CSS Floating Action Button Designs
Morphing FABLabeled PillScroll to TopNeon CyberGlass FABBrutalist StampDrag HandlePremium AuroraQuick ReplySquare ModernLoading SpinnerVoice Action
View the full collection →