CCHub Logo CCHub Tailwind Collection
Komponenten Tasten Buttons-Komponente

Buttons-Komponente

Eine Tastenkomponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für dunkle Themen, die die Ästhetik der 80er und 90er Jahre nostalgisch heraufbeschwören soll.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Retro/Vintage Buttons</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <button class="bg-pink-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
            Retro Pink Button
        </button>
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            Vintage Blue Button
        </button>
        <button class="bg-green-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
            Nostalgic Green Button
        </button>
        <button class="bg-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500">
            Retro Purple Button
        </button>
    </div>
    <div class="mt-8">
        <img class="w-32 h-32 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://picsum.photos/200/200" alt="Random Placeholder" />
        <p class="text-center text-gray-600 dark:text-gray-300">Nostalgic Image</p>
    </div>
    <div class="mt-4">
        <img class="w-16 h-16 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Random User Avatar" />
        <p class="text-center text-gray-600 dark:text-gray-300">User Avatar</p>
    </div>
</div>

Verwandte Komponenten

Neumorphismus Social-Media-Schaltflächen

Eine einfache Schaltflächenkomponente im Neumorphism-Stil für Social-Media-Schnittstellen mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Die Schaltfläche verwendet ein analoges Farbschema und subtile Schatten, um ein weiches, extrudiertes Aussehen zu erzeugen.

Offen

Buttons-Komponente

Material Design-gestaltete Schaltflächen mit einem Graustufen-Farbschema für Portfoliozwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

Buttons-Komponente

Eine reaktionsschnelle Schaltflächenkomponente mit Unterstützung für den Dunkelmodus, die für den E-Commerce geeignet ist und ein einfaches triadisches Farbschema aufweist.

Offen