Zurück zum Anfang Schaltfläche
Eine minimalistische, flach gestaltete Schaltfläche "Zurück zum Anfang", die in eine Dashboard-Oberfläche passt. Die Schaltfläche ist in einem monochromen Farbschema gehalten und verfügt über Hover- und Fokuseffekte für eine bessere Interaktivität. Es ist auch reaktionsschnell und unterstützt den Dunkelmodus.
HTML-Code
<div class="fixed bottom-8 right-8">
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-600 text-white shadow-lg transition-all ease-in-out duration-300 hover:bg-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</a>
</div>Verwandte Komponenten
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.
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.
Zurück zum Anfang Schaltfläche
Eine einfache und elegante Schaltfläche "Zurück nach oben", die in der unteren rechten Ecke des Bildschirms fixiert erscheint. Verfügt über ein dezentes Pastell-Farbschema und sanfte Schwebe-/Fokus-Mikrointeraktionen. Die Schaltfläche verfügt über ein responsives Design mit integrierter Unterstützung für den Dunkelmodus. Wenn Sie den Mauszeiger darüber bewegen, wird die Schaltfläche sanft nach oben skaliert und ändert die Hintergrundfarbe, um visuelles Feedback zu geben. Die Komponente verwendet nur Tailwind-CSS-Klassen, für die kein JavaScript erforderlich ist.