Componente de botones Me gusta/Reacción
Un componente complejo de botones de Me gusta/Reacción con microinteracciones, combinación de colores análoga, diseño receptivo y soporte de temas oscuros, adecuado para un tablero. Utiliza Tailwind CSS e incluye múltiples elementos interactivos con animaciones atractivas.
Código HTML
<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 min-h-screen">
<div class="flex space-x-2">
<!-- Primary Like Button -->
<button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-blue-700 dark:hover:bg-blue-800">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.667a2 2 0 002 2h2.983a2 2 0 001.828-1.154l3.913-7K11 2.167v1.833A2.5 2.5 0 008.5 6H5a2 2 0 00-2 2v2.333L6 10.333z"></path>
</svg>
<span>Like</span>
<span class="text-sm">123</span>
</button>
<!-- Reaction Buttons - Example using emojis -->
<div class="relative group">
<button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-green-700 dark:hover:bg-green-800">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
<line x1="9" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
<span>React</span>
</button>
<!-- Reaction Options (Hidden by default, shown on hover) -->
<div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 flex space-x-1 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">👍</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">❤️</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😆</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😮</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😢</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😡</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de botones Me gusta/Reacción
Un componente de botones de Me gusta / Reacción receptivo con soporte de modo oscuro usando Tailwind CSS. Cuenta con un esquema de color complementario adecuado para un tablero, con una complejidad moderada para botones de reacción interactivos.
NeumorfismoComoReacciónBotones
Componente responsivo de botones de Me gusta / Reacción para blog / contenido con soporte de tema oscuro y diseño de neumorfismo.
Botones de reacción skeuomórfica
Un conjunto de botones de "me gusta" y "reacción" con un estilo de diseño skeuomórfico, que admite diseños responsivos y modo oscuro. Los botones se implementan puramente con HTML y Tailwind CSS, sin JavaScript. El modo oscuro se maneja a través de clases CSS. Las imágenes de marcador de posición se utilizan para los avatares.