Retro_Back_To_Top_Button
Retro/Vintage - Nostalgische Back to Top Button-Komponente für den Konsum von Blogs/Inhalten mit analogem Farbschema. Komplexes Design mit Unterstützung für reaktionsschnelle und dunkle Modi.
HTML-Code
<div class="fixed bottom-5 right-5">
<a href="#"
class="group flex items-center justify-center p-4 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 text-white shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:from-purple-700 dark:via-pink-700 dark:to-red-700 dark:focus:ring-purple-800"
aria-label="Back to top">
<svg class="h-8 w-8 transition-transform duration-300 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>
</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 "Zurück zum Anfang"-Button für CRM/Business-Tools, der im Bauhaus-Stil mit kontrastreichen Farben gestaltet ist, geometrische Formen aufweist und für alle Bildschirmgrößen reaktionsschnell ist, einschließlich Unterstützung des Dunkelmodus.
Zurück zum Anfang Schaltflächenkomponente
Eine reaktionsschnelle "Zurück zum Anfang"-Schaltfläche mit Material Design-Ästhetik, monochromatischem Farbschema und Unterstützung für den Dunkelmodus. Sie wird als schwebende Aktionsschaltfläche (FAB) in der unteren rechten Ecke angezeigt.