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.
Código HTML
<div class="p-4 sm:p-6 bg-gray-900 border border-blue-900 shadow-lg rounded-xl dark:bg-gray-950 dark:border-blue-950">
<div class="flex justify-around items-center space-x-2">
<button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
<svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
</svg>
<span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Like</span>
<span class="text-sm text-blue-500 group-hover:text-blue-300 transition-colors duration-300">2.5K</span>
</button>
<button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
<svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2h8l3-3 3 3v6z"></path>
</svg>
<span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Save</span>
</button>
<button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
<svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M15 8a3 3 0 10-2.977-2.977L5.582 12.02A3 3 0 1010.42.977l6.467 6.467a3 3 0 10-.98.98L9.02 8.02A3 3 0 1015 8z"></path>
</svg>
<span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Share</span>
</button>
</div>
</div>Componentes relacionados
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.
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.
Componente de botones Me gusta/Reacción
Un componente web complejo con morfismo de vidrio con elementos translúcidos y efectos de desenfoque. Incluye múltiples elementos interactivos diseñados para sitios web empresariales, soportando el modo oscuro.