Back to CSS Floating Buttons Scroll to Top Pure CSS
Share
.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); }
}
<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>
Live preview Edit any tab — preview updates live Ready