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.
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äche
Eine minimalistische Flat-Design-Back-to-Top-Button-Komponente für E-Commerce-Websites, die ein Graustufen-Farbschema und ein responsives Design mit Unterstützung für dunkle Themen verwendet.
Zurück zum Anfang Schaltflächenkomponente
Eine reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente für Dokumentations-/Wiki-Seiten, inspiriert von Memphis Design mit einem lila/violetten Farbschema. Enthält Unterstützung für den Dunkelmodus und ein komplexes, interaktives Erscheinungsbild.
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.