Zurück zum Anfang Schaltflächenkomponente
Eine reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente, die für den E-Commerce entwickelt wurde und sich durch ein lebendiges Farbschema auf dunklem Hintergrund auszeichnet. Es enthält einen subtilen Hover-Effekt und sorgt mit Unterstützung des Dunkelmodus für Sichtbarkeit über alle Bildschirmgrößen hinweg.
HTML-Code
<div class="fixed bottom-4 right-4 z-50">
<a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
<svg class="w-6 h-6 text-white 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="sr-only">Back to Top</span>
</a>
</div>Verwandte Komponenten
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.
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.
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.