Zurück zum Anfang Schaltflächenkomponente
Eine reaktionsschnelle Back to Top Button-Komponente mit Glassmorphism-Design, Farbschema in Erdtönen und komplexen Interaktionen, die für ein Dashboard geeignet ist.
HTML-Code
<div class="fixed bottom-6 right-6">
<a href="#top" class="group block">
<button class="relative flex items-center justify-center w-16 h-16 bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-500 dark:focus:ring-teal-400 focus:ring-opacity-70">
<svg class="w-8 h-8 text-gray-800 dark:text-gray-200 transform 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>
<span class="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-1/2 px-3 py-1 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-sm font-semibold rounded-md whitespace-nowrap transition-all duration-300 ease-in-out">
Back to Top
</span>
</button>
</a>
</div>
<div class="min-h-screen bg-gradient-to-br from-stone-100 via-stone-200 to-stone-300 dark:from-stone-800 dark:via-stone-900 dark:to-black flex flex-col items-center justify-center p-8">
<h1 id="top" class="text-5xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Dashboard Overview</h1>
<p class="text-lg text-gray-700 dark:text-gray-300 max-w-2xl text-center mb-12">
Scroll down to see the
Verwandte Komponenten
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 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.
Zurück zum Anfang Schaltflächenkomponente
Eine reaktionsschnelle Schaltfläche "Zurück zum Anfang" in einem skeuomorphen Stil mit Unterstützung für dunkle Themen und reaktionsschnellen Effekten.