CCHub Logo CCHub Tailwind Collection
Komponenten Like-/Reaction-Schaltflächen Komponente "Gefällt mir/Reaktions-Buttons"

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Like/Reaction Buttons-Komponente im Glassmorphism-Designstil mit Milchglaseffekten, responsivem Design und Unterstützung für dunkle Designs mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 bg-clip-padding backdrop-filter backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this post!</h2>
        <div class="flex space-x-4">
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-blue-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=1" alt="Like" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Like</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-green-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=2" alt="Love" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Love</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-yellow-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=3" alt="Haha" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Haha</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-red-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=4" alt="Wow" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Wow</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-purple-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=5" alt="Sad" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Sad</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-gray-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=6" alt="Angry" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Angry</span>
            </button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Gefällt mir/Reaktions-Buttons"

Eine reaktionsschnelle Like/Reaction-Buttons-Komponente, die unter Berücksichtigung von Mikrointeraktionen entwickelt wurde, ein monochromatisches Farbschema verwendet, das für den Konsum von Blogs und Inhalten geeignet ist, mit Unterstützung für dunkle Themen.

Offen

Skeuomorphe Reaktionsknöpfe

Eine Reihe von "Gefällt mir"- und Reaktionsschaltflächen mit einem Skeuomorphen Designstil, der responsive Layouts und den Dunkelmodus unterstützt. Die Buttons sind rein mit HTML und Tailwind CSS umgesetzt, ohne JavaScript. Der Dunkelmodus wird über CSS-Klassen behandelt. Platzhalterbilder werden für Avatare verwendet.

Offen

Neumorphe Like-/Reaction-Tasten

Ein einfacher, reaktionsschneller Satz von "Gefällt mir"-/Reaktionstasten mit einem neumorphen Designstil, einem juwelenfarbenen Farbschema und Unterstützung für den Dunkelmodus, geeignet für Finanz-/Bankschnittstellen.

Offen