Zurück zum Anfang Schaltflächenkomponente
Eine minimalistische und flache Back to Top Button-Komponente für Dashboards mit einem monochromen Farbschema. Es ist mäßig komplex mit interaktiven Funktionen, einem responsiven Design und Unterstützung für dunkle Themen, die ausschließlich mit HTML und Tailwind CSS erstellt wurden.
HTML-Code
<div class="fixed bottom-4 right-4">
<a href="#" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-full shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors duration-300 ease-in-out flex items-center justify-center">
<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="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</a>
</div>Verwandte Komponenten
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 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.
Brutalismus Zurück zum Anfang Schaltfläche
Zurück zum Anfang Button-Komponente im Brutalismus-Stil, triadischem Farbschema und komplexer Komplexität. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript.