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äche

Schaltfläche "Zurück zum Anfang" mit neumorphem Design, monochromatischem Farbschema und Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS.

Offen

Zurück zum Anfang Schaltfläche

Eine minimalistische, flach gestaltete Schaltfläche "Zurück zum Anfang", die in eine Dashboard-Oberfläche passt. Die Schaltfläche ist in einem monochromen Farbschema gehalten und verfügt über Hover- und Fokuseffekte für eine bessere Interaktivität. Es ist auch reaktionsschnell und unterstützt den Dunkelmodus.

Offen

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.

Offen