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.
HTML-Code
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span class="sr-only">Back to top</span>
</button>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ächenkomponente
Ein responsiver "Zurück zum Anfang"-Button, der den Prinzipien von Material Design folgt und den Dunkelmodus mit Tailwind CSS für Styling und reaktionsschnelle Effekte unterstützt.
Zurück zum Anfang Button - Material Design Pastell
Eine reaktionsschnelle "Zurück zum Anfang"-Button-Komponente, die den Prinzipien des Material Designs mit einem pastellfarbenen Farbschema folgt und auf eine Portfolio-Website zugeschnitten ist. Es beinhaltet Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.