16 CSS Floating Action Button Designs
Premium Aurora
A soft aurora gradient drifts gently behind the FAB on a 14s loop — the "this is a premium product" floating button. Gentle motion, no chromatic spin.
Premium Aurora the 14th 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-aurora" aria-label="Upgrade">
<svg viewBox="0 0 24 24" aria-hidden="true">
<polygon points="12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2" />
</svg>
</button> .cfb-aurora {
position: relative;
width: 56px; height: 56px;
border: 0; border-radius: 50%;
background: #15151d;
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
isolation: isolate;
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.cfb-aurora::before {
content: ''; position: absolute;
top: -40%; left: -20%;
width: 140%; height: 220%;
background:
radial-gradient(ellipse 60px 50px at 20% 50%, rgba(124,108,255,0.7), transparent 60%),
radial-gradient(ellipse 50px 40px at 60% 50%, rgba(255,108,138,0.6), transparent 60%),
radial-gradient(ellipse 60px 50px at 100% 50%, rgba(46,204,138,0.45), transparent 60%);
filter: blur(8px);
z-index: -1;
animation: cfb-aurora-drift 14s ease-in-out infinite;
}
.cfb-aurora:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124,108,255,0.4); }
.cfb-aurora:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-aurora svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 0 4px rgba(255,255,255,0.4)); }
@keyframes cfb-aurora-drift {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-8%) translateY(2%); }
}
@media (prefers-reduced-motion: reduce) {
.cfb-aurora,
.cfb-aurora * {
animation: none !important;
}
}
More from 16 CSS Floating Action Button Designs
Speed DialPulse RingMorphing FABLabeled PillScroll to TopNeon CyberGlass FABBrutalist StampNotification BadgeDrag HandleQuick ReplySquare Modern
View the full collection →