Art Deco Zurück zum Anfang Button
Eine "Back to Top"-Button-Komponente mit einem Art-Déco-Design mit geometrischen Mustern und warmen Sonnenuntergangsfarben, die sich für Dating-/Social-Media-Plattformen eignet. Es enthält einen reichhaltigen, interaktiven Stil und unterstützt den Dunkelmodus.
HTML-Code
<div class="fixed bottom-8 right-8 z-50">
<a href="#" class="group relative flex items-center justify-center p-0.5 overflow-hidden text-2xl font-bold text-white shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800 transition-all duration-300 hover:scale-105 active:scale-95 transform rotate-0 hover:rotate-3">
<span class="absolute inset-0 bg-gradient-to-br from-orange-400 via-red-500 to-yellow-600 dark:from-orange-700 dark:via-red-800 dark:to-yellow-900 opacity-90 group-hover:opacity-100 transition-opacity duration-300 filter blur-sm group-hover:blur-none"></span>
<span class="absolute inset-0 bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.2)_5px,_rgba(0,0,0,0.2)_10px)] opacity-30 group-hover:opacity-50 transition-opacity duration-300 transform group-hover:scale-110 group-hover:rotate-12"></span>
<span class="relative flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-tl from-orange-600 to-red-600 dark:from-red-900 dark:to-orange-900 rounded-full group-hover:rounded-2xl transition-all duration-300 overflow-hidden shadow-inner shadow-orange-900/50 dark:shadow-red-950/50 group-hover:shadow-lg group-hover:shadow-orange-900/70 dark:group-hover:shadow-red-950/70">
<span class="absolute inset-0 border-4 border-yellow-300 dark:border-yellow-700 rounded-full group-hover:rounded-2xl transition-all duration-300 opacity-60 group-hover:opacity-100"></span>
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-white dark:text-gray-200 transform group-hover:-translate-y-1 transition-transform duration-300" 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>
<div class="absolute bottom-1 right-1 w-4 h-4 bg-yellow-300 dark:bg-yellow-700 rounded-full blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</span>
</a>
</div>
Verwandte Komponenten
Zurück zum Anfang Schaltfläche
Eine minimalistische und reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente mit Unterstützung für den Dunkelmodus. Es wird nach dem Scrollen nach unten angezeigt und verwendet ein sanftes Scrollen, um den Benutzer beim Klicken an den Anfang der Seite zurückzubringen. Für das Scrollen wird kein JavaScript verwendet, sondern nur CSS.
Zurück zum Anfang Schaltflächenkomponente
Ein einfacher, künstlerischer "Zurück zum Anfang"-Button, der für Food-/Restaurant-Websites entwickelt wurde und eine von Aquarellen inspirierte Graustufen-Ästhetik aufweist. Es ist reaktionsschnell und unterstützt den Dunkelmodus.
Zurück zum Anfang Schaltfläche - 3D Design
Eine Schaltfläche "Zurück zum Anfang" mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Designs mithilfe von Tailwind CSS. Es ist kein JavaScript enthalten.