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 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.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5">
    <a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
        <span class="text-xl">⬆️</span>
    </a>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }

    /* General styles */
    body {
        font-family: 'Courier New', Courier, monospace;
        background-color: white;
        color: black;
        transition: background-color 0.5s, color 0.5s;
    }
</style>

Verwandte Komponenten

Zurück zum Anfang Schaltfläche

Ein einfacher Back-to-Top-Button mit Glassmorphism-Design und monochromatischem Farbschema für E-Commerce-Websites.

Offen

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle "Zurück zum Anfang"-Schaltfläche mit Material Design-Ästhetik, monochromatischem Farbschema und Unterstützung für den Dunkelmodus. Sie wird als schwebende Aktionsschaltfläche (FAB) in der unteren rechten Ecke angezeigt.

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