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

Ein "Zurück zum Anfang"-Button für CRM/Business-Tools, der im Bauhaus-Stil mit kontrastreichen Farben gestaltet ist, geometrische Formen aufweist und für alle Bildschirmgrößen reaktionsschnell ist, einschließlich Unterstützung des 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

Zurück zum Anfang Schaltflächenkomponente

Eine brutalistisch gestaltete Back to Top Button-Komponente mit Tailwind CSS. Diese Komponente verfügt über ein fettes, kontrastreiches Design und unterstützt reaktionsschnelle Effekte und dunkles Design.

Offen