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ächenkomponente
Eine reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente für Dokumentations-/Wiki-Seiten, inspiriert von Memphis Design mit einem lila/violetten Farbschema. Enthält Unterstützung für den Dunkelmodus und ein komplexes, interaktives Erscheinungsbild.
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.
Zurück zum Anfang Button-Komponente - Brutalismus Erdtöne
Eine komplexe "Zurück zum Anfang"-Schaltflächenkomponente, die in einem brutalistischen Stil mit einem erdigen Farbschema gestaltet ist und für Blog-/Content-Websites geeignet ist. Es ist reaktionsschnell und unterstützt den Dunkelmodus.