Zurück zum Anfang Schaltflächenkomponente
Eine reaktionsschnelle, optisch ansprechende Schaltfläche "Zurück zum Anfang" mit einem triadischen Farbschema, Farbverlauf und sanften Übergängen, die für eine Portfolio-Website geeignet ist, einschließlich Unterstützung des Dunkelmodus.
HTML-Code
<div class="fixed bottom-6 right-6 z-50">
<!-- The button is initially hidden and would be revealed by JS on scroll -->
<!-- For demonstration, it's always visible here. In a real app, add a 'hidden' class by default -->
<button aria-label="Scroll to top" class="group flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
bg-gradient-to-br from-emerald-400 via-teal-500 to-blue-600
dark:from-emerald-600 dark:via-teal-700 dark:to-blue-800">
<svg class="h-8 w-8 text-white transition-transform duration-300 ease-in-out group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
</button>
</div>Verwandte Komponenten
Zurück zum Anfang Button - Brutalismus
Eine brutalistische "Back to Top"-Button-Komponente für ein Portfolio mit einem triadischen Farbschema und einfachem Design. Es ist reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.
Brutalism_Earth_Tone_Back_To_Top_Button
Ein brutalistisch inspirierter "Back to Top"-Button mit Erdtönen, der für Blog-/Content-Websites entwickelt wurde. Es ist mäßig komplex, reaktionsschnell und unterstützt den Dunkelmodus. Der Knopf besticht durch ein kontrastreiches Design und eine leicht krude Ästhetik.
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.