CCHub Logo CCHub Tailwind Collection
Komponenten Zurück zum Anfang Schaltfläche Zurück zum Anfang Schaltflächenkomponente

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle Schaltfläche "Zurück zum Anfang" mit auf Mikrointeraktion ausgerichteten Animationen, einem triadischen Farbschema und Unterstützung für dunkle Themen, die für ein Portfolio geeignet sind.

Vorschau

HTML-Code 

<div class="fixed bottom-6 right-6">
  <a href="#top" class="group relative flex items-center justify-center p-3 rounded-full bg-blue-500 text-white shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:scale-110 dark:focus:ring-blue-800">
    <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:-translate-y-1 group-hocus:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
    </svg>
    <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 delay-150">Back to Top</span>
  </a>
</div>

Verwandte Komponenten

Zurück zum Anfang Schaltflächenkomponente

Ein responsiver "Zurück zum Anfang"-Button, der den Prinzipien von Material Design folgt und den Dunkelmodus mit Tailwind CSS für Styling und reaktionsschnelle Effekte unterstützt.

Offen

Brutalistischer Back to Top Button

Ein brutalistischer Back-to-Top-Button in Tailwind CSS mit hohem Kontrast, fetter Typografie und scharfen Kanten. Beinhaltet Unterstützung für reaktionsschnelle Größen und Dunkelmodus.

Offen

Zurück zum Anfang Schaltfläche

Eine Material Design-Schaltfläche Zurück zum Anfang, die angezeigt wird, wenn der Benutzer auf der Seite nach unten scrollt. Es bietet Unterstützung für den Dunkelmodus und flüssiges Scrollen.

Offen