16 CSS Floating Action Button Designs
Scroll to Top
Up-arrow FAB with a subtle bounce on hover — the canonical "back to top" affordance. Keyboard accessible, focus-visible ring, semantic anchor.
Scroll to Top the 6th 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
<a href="#top" class="cfb-top" aria-label="Back to top"> <svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="18 15 12 9 6 15" /></svg> </a>
.cfb-top {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px;
background: #1a1a28;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
color: #cbd5e1;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
transition: transform 0.25s, background 0.2s, border-color 0.2s, color 0.2s;
}
.cfb-top:hover {
transform: translateY(-4px);
background: rgba(124,108,255,0.12);
border-color: rgba(124,108,255,0.4);
color: #a78bfa;
animation: cfb-top-bounce 0.6s ease-in-out infinite alternate;
}
.cfb-top:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cfb-top-bounce {
from { transform: translateY(-4px); }
to { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
.cfb-top,
.cfb-top * {
animation: none !important;
}
}
More from 16 CSS Floating Action Button Designs
Neon CyberGlass FABBrutalist StampNotification BadgeDrag HandlePremium AuroraQuick ReplySquare ModernLoading SpinnerVoice ActionClassic PlusSpeed Dial
View the full collection →