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

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.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5 z-50">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
        ⬆️
    </a>
</div>

<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
    <div class="container mx-auto p-5">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
        <p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente, die für den E-Commerce entwickelt wurde und sich durch ein lebendiges Farbschema auf dunklem Hintergrund auszeichnet. Es enthält einen subtilen Hover-Effekt und sorgt mit Unterstützung des Dunkelmodus für Sichtbarkeit über alle Bildschirmgrößen hinweg.

Offen

Skeuomorphe Schaltfläche "Zurück zum Anfang"

Ein skeuomorpher "Zurück zum Anfang"-Button mit warmen Neutraltönen für Business-/Unternehmenswebsites mit responsivem Design und Unterstützung für den Dunkelmodus. Der Knopf hat einen 3D-Druckeffekt.

Offen

Zurück zum Anfang Schaltflächenkomponente

Ein responsiver "Zurück zum Anfang"-Button, der den Prinzipien von Material Design folgt und den Dunkelmodus mit Tailwind CSS für Styling und reaktionsschnelle Effekte unterstützt.

Offen