CyberpunkMi piaceReazionePulsanti
Un componente semplice e reattivo per i pulsanti "mi piace/reazione" per un marketplace, caratterizzato da un'estetica cyberpunk con toni blu oceano e supporto per la modalità oscura.
Codice 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>Componenti correlati
Pulsanti di reazione per giochi retrò
Un complesso componente del pulsante di reazione a tema retrò per siti Web di giochi, con "mi piace" e altri tipi di reazione con conteggi, progettato con colori autunnali e piena reattività, incluso il supporto della modalità oscura.
Componente Art Déco Like/Pulsanti di reazione
Un set semplice e reattivo di pulsanti Mi piace/reazione con un'estetica Art Déco, adatto per applicazioni sportive/fitness. Dispone di neutri caldi e supporto per la modalità scura.
Componente Pulsanti Mi piace/Reazione
Un componente web che presenta pulsanti Mi piace e Reazione progettati in uno stile scheumorfico, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.