Componente de botones de reacción/Me gusta Art Deco
Un conjunto simple y sensible de botones de me gusta/reacción con una estética Art Deco, adecuado para aplicaciones deportivas/fitness. Cuenta con neutros cálidos y compatibilidad con el modo oscuro.
Código HTML
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl border-t-4 border-b-4 border-amber-600 dark:border-amber-500 w-full max-w-sm mx-auto transition-colors duration-300">
<div class="flex justify-around items-center border-t border-b border-gray-300 dark:border-gray-700 py-4 mb-4 relative overflow-hidden">
<!-- Art Deco Pattern Overlay -->
<div class="absolute inset-0 pointer-events-none opacity-5 dark:opacity-10">
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<rect x="0" y="0" width="100" height="100" fill="none" />
<path d="M0 0 L10 10 L0 20 Z M100 0 L90 10 L100 20 Z M0 100 L10 90 L0 80 Z M100 100 L90 90 L100 80 Z M50 0 L40 10 L60 10 L50 0 Z M50 100 L40 90 L60 90 L50 100 Z" fill="currentColor" class="text-gray-400 dark:text-gray-600"/>
<path d="M20 5 L25 0 L30 5 Z M70 5 L75 0 L80 5 Z M20 95 L25 100 L30 95 Z M70 95 L75 100 L80 95 Z M5 20 L0 25 L5 30 Z M95 20 L100 25 L95 30 Z M5 70 L0 75 L5 80 Z M95 70 L100 75 L95 80 Z" fill="currentColor" class="text-gray-400 dark:text-gray-600"/>
</svg>
</div>
<button aria-label="Like Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
<svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:scale-110 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Like</span>
</button>
<button aria-label="Clap Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
<svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:rotate-12 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
<path d="M15 1H9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-1 8h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2zm-6 8h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2zm12 0h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2z"/>
</svg>
<span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Clap</span>
</button>
<button aria-label="Boom Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
<svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:-translate-y-1 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.9L9.1 16H8a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h1.1L11 6.1H8V4h8v2.1l-2 3.8h1c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1h-1.1l2 3.8H16v2h-4z"/>
</svg>
<span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Boom!</span>
</button>
</div>
<div class="text-center text-gray-700 dark:text-gray-300">
<p class="text-lg font-semibold tracking-wider uppercase text-amber-800 dark:text-amber-400">Show Your Support!</p>
<p class="text-sm mt-2 text-gray-500 dark:text-gray-400">Engage with our latest updates and achievements.</p>
</div>
</div>
</div>Componentes relacionados
Componente de botones Me gusta/Reacción
Un componente de botones Me gusta/Reacción con estilo Glassmorphism con efectos responsivos y compatibilidad con el modo oscuro mediante Tailwind CSS.
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.
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.