CyberpunkCommeRéactionBoutons
Un composant simple et réactif des boutons J’aime/Réaction pour une place de marché, avec une esthétique cyberpunk avec des tons bleu océan et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Skeuomorphic Like/Reaction Buttons
Il s’agit d’un composant complexe, réactif et à thème sombre utilisant un schéma de couleurs monochromatique pour le commerce électronique.
Boutons de réaction pour les jeux rétro
Un composant de bouton de réaction complexe, à thème rétro, pour les sites de jeux, avec des « likes » et d’autres types de réactions avec des comptes, conçu avec des couleurs d’automne et une réactivité totale, y compris la prise en charge du mode sombre.
NeumorphismLikeReactionButtons
Composant réactif pour blog/contenu avec prise en charge du thème sombre et conception Neumorphism.