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 con estilo de diseño Glassmorphism, con efectos de vidrio esmerilado, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de botones Me gusta/Reacción
Un componente de botones de Me gusta/Reacción diseñado en estilo Brutalismo con CSS de Tailwind, con efectos responsivos y soporte para temas oscuros.
CyberpunkLikeReactionButtons
Un componente de botones de me gusta/reacción simple y receptivo para un mercado, con una estética cyberpunk con tonos azul océano y soporte para modo oscuro.