Zurück zum Anfang Schaltflächenkomponente
Eine reaktionsschnelle Zurück-zu-oben-Schaltfläche, die mit Mikrointeraktionen und lebendigen Farben gestaltet wurde und sich für eine Dashboard-Oberfläche mit Unterstützung für den Dunkelmodus eignet.
HTML-Code
<div class="fixed bottom-4 right-4">
<button class="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full p-3 shadow-lg hover:scale-110 transition-transform duration-300 dark:from-purple-800 dark:to-pink-800">
<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 4v16m0 0l-4-4m4 4l4-4" />
</svg>
</button>
</div>Verwandte Komponenten
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.
Brutalistischer Back to Top Button
Ein brutalistischer Back-to-Top-Button in Tailwind CSS mit hohem Kontrast, fetter Typografie und scharfen Kanten. Beinhaltet Unterstützung für reaktionsschnelle Größen und Dunkelmodus.
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.