Componente de botones Me gusta/Reacción
Un componente receptivo de botones de Me gusta / Reacción diseñado teniendo en cuenta las microinteracciones, utilizando un esquema de color monocromático, adecuado para el blog y el consumo de contenido, con soporte para temas oscuros.
Código HTML
<div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
<div class="flex space-x-4">
<button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
</button>
<button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
</button>
<button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
</button>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>Componentes relacionados
Botones de reacción de juegos retro
Un componente complejo de botón de reacción de temática retro para sitios web de juegos, con 'me gusta' y otros tipos de reacción con recuentos, diseñado con colores otoñales y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.
Componente de botones Me gusta/Reacción
Botones de Me gusta/Reacción Componente codificado en HTML con Tailwind CSS, con un diseño de Brutalismo, combinación de colores en tonos Tierra y complejidad moderada, adecuado para el comercio electrónico. Incluye diseño responsivo y soporte para modo oscuro.
Componente de botones Me gusta/Reacción
Un componente web con botones Me gusta y Reacción con microinteracciones y soporte para temas oscuros usando Tailwind CSS.