Composant Like/Reaction Buttons
Un composant réactif de boutons J’aime/Réaction conçu pour les micro-interactions, utilisant un schéma de couleurs monochromatiques, adapté à la consommation de blogs et de contenu, avec prise en charge des thèmes sombres.
HTML Code
<div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
<div class="flex space-x-4">
<button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
</button>
<button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
</button>
<button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
</button>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>Composants associés
Composant Like/Reaction Buttons
Un composant web complexe caractérisé par un morphisme en verre avec des éléments translucides et des effets de flou. Il comprend plusieurs éléments interactifs conçus pour les sites Web d’entreprise, prenant en charge le mode sombre.
Composant Like/Reaction Buttons
Un ensemble complexe et minimaliste de boutons de réaction pour une plate-forme musicale/audio, avec des couleurs vives, une prise en charge du mode sombre et une réactivité totale.
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.