CCHub Logo CCHub Tailwind Collection
Komponenten Zurück zum Anfang Schaltfläche Zurück zum Anfang Schaltflächenkomponente

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.

Vorschau

HTML-Code 

<div class="fixed bottom-10 right-10 z-50">
    <a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110"> 
        <img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
    </a>
    <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
        Back to Top
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white { background-color: #1f2937; }
    .bg-gray-200 { background-color: #4b5563; }
    .bg-gray-700 { background-color: #2d3748; }
    .text-gray-800 { color: #f7fafc; }
}
</style>

Verwandte Komponenten

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente mit einem von Papier/Druck inspirierten Design, einem triadischen Farbschema und komplexen visuellen Elementen, die für E-Commerce-Websites geeignet sind. Enthält Unterstützung für den Dunkelmodus.

Offen

Zurück zum Anfang Button - Brutalismus

Eine brutalistische "Back to Top"-Button-Komponente für ein Portfolio mit einem triadischen Farbschema und einfachem Design. Es ist reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.

Offen

Zurück-nach-oben-Schaltfläche

Eine Back-to-Top-Button-Komponente mit Mikrointeraktionen, Farbschema in Erdtönen, einfachem Layout für Geschäfts-/Unternehmenswebsites; Responsives Design mit Unterstützung des Dunkelmodus unter Verwendung von Tailwind CSS

Offen