16 CSS Floating Action Button Designs
Pulse Ring
A continuous concentric pulse ring radiates outward — the attention-getter pattern for "new feature" or "tap me" prompts. Pure CSS via box-shadow keyframes.
Pulse Ring the 3rd 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-pulse" aria-label="What's new">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2v6m0 0a4 4 0 0 0-4 4v3.5L6 17h12l-2-1.5V12a4 4 0 0 0-4-4z" />
<path d="M9 17a3 3 0 0 0 6 0" />
</svg>
</button> .cfb-pulse {
position: relative;
width: 52px; height: 52px;
border: 0; border-radius: 50%;
background: linear-gradient(135deg, #ff6c8a, #f5a623);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(255,108,138,0.4);
}
.cfb-pulse::before, .cfb-pulse::after {
content: '';
position: absolute; inset: 0;
border-radius: 50%;
border: 2px solid rgba(255,108,138,0.55);
animation: cfb-pulse-ring 1.8s ease-out infinite;
}
.cfb-pulse::after { animation-delay: 0.9s; }
@keyframes cfb-pulse-ring {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.7); opacity: 0; }
}
.cfb-pulse:hover { filter: brightness(1.08); }
.cfb-pulse:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.cfb-pulse svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
.cfb-pulse,
.cfb-pulse * {
animation: none !important;
}
}
More from 16 CSS Floating Action Button Designs
Voice ActionClassic PlusSpeed DialMorphing FABLabeled PillScroll to TopNeon CyberGlass FABBrutalist StampNotification BadgeDrag HandlePremium Aurora
View the full collection →