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

Zurück zum Anfang Schaltfläche

Eine minimalistische Flat-Design-Back-to-Top-Button-Komponente für E-Commerce-Websites, die ein Graustufen-Farbschema und ein responsives Design mit Unterstützung für dunkle Themen verwendet.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5 z-50">
    <button class="bg-gray-800 text-white rounded-full p-3 shadow-md hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </button>
</div>

Verwandte Komponenten

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

Zurück zum Anfang Schaltfläche

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

Offen

Brutalismus Zurück zum Anfang Schaltfläche

Zurück zum Anfang Button-Komponente im Brutalismus-Stil, triadischem Farbschema und komplexer Komplexität. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript.

Offen