Componente Pulsanti Mi piace/Reazione
Un componente Like/Reaction Buttons con stile di design Glassmorphism, con effetti di vetro smerigliato, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente Pulsanti Mi piace/Reazione
Un componente complesso, reattivo, monocromatico dei pulsanti di simpatia/reazione con animazioni incentrate sulla microinterazione per siti web aziendali/aziendali, che supporta il tema scuro.
Monospace_Developer_Reaction_Buttons
Un componente semplice e reattivo per i pulsanti "mi piace/reazione" ispirato all'estetica monospace/developer con una combinazione di colori retrò/vintage, adatto per siti web di notizie e giornalismo. Include il supporto per la modalità oscura.
Componente Pulsanti Mi piace/Reazione
Un componente retrò / vintage Pulsanti Mi piace / Reazione progettato per i siti Web aziendali, caratterizzato da toni della terra e design reattivo con supporto per la modalità oscura.