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

Eine Material Design-Schaltfläche Zurück zum Anfang, die angezeigt wird, wenn der Benutzer auf der Seite nach unten scrollt. Es bietet Unterstützung für den Dunkelmodus und flüssiges Scrollen.

Offen

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.

Offen

Zurück zum Anfang Schaltflächenkomponente

Ein einfacher Back-to-Top-Button, der in einem brutalistischen Stil mit Tailwind CSS gestaltet ist und sich für eine Portfolio-Website eignet. Es verfügt über ein Graustufen-Farbschema und Unterstützung für dunkle Themen.

Offen