Pulsanti Mi piace/Reazione
Componente Pulsanti Mi piace/Reazione con microinterazioni, reattività e supporto per temi scuri
Codice HTML
<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 min-h-screen">
<div class="flex space-x-4">
<button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out transform hover:scale-110">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.808 2.808l-7.922 8.802a1.995 1.995 0 01-2.808.01z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10h.01M7 10v7a3 3 0 003 3h.01M7 10h10.929c.795 0 1.549-.394 2-.664"></path>
</svg>
<span>Like</span>
</button>
<button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-200 ease-in-out transform hover:scale-110">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.91a2.14 2.14 0 00-3.03 0L12 10.78l-5.81-5.87a2.14 2.14 0 00-3.03 0 2.18 2.18 0 000 3.07L12 17l8.84-8.92a2.18 2.18 0 000-3.07z"></path>
</svg>
<span>Love</span>
</button>
<button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-200 ease-in-out transform hover:scale-110">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span>Haha</span>
</button>
</div>
</div>Componenti correlati
Componente Pulsanti Mi piace/Reazione
Un componente di pulsanti di reazione / Mi piace di progettazione 3D che utilizza Tailwind CSS con supporto per temi scuri ed effetti reattivi.
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.
Bottoni di reazione scheumorfi
Una serie di pulsanti Mi piace e di reazione con uno stile di design Skeuomorphic, che supporta layout reattivi e modalità scura. I pulsanti sono implementati esclusivamente con HTML e Tailwind CSS, senza JavaScript. La modalità oscura viene gestita tramite classi CSS. Le immagini segnaposto vengono utilizzate per gli avatar.