Composant Like/Reaction Buttons
Un composant complexe, réactif, monochromatique des boutons de like/reaction avec des animations axées sur la micro-interaction pour les sites Web d’entreprise, prenant en charge le thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="flex space-x-2 p-4 rounded-lg bg-white dark:bg-gray-800 shadow-lg">
<!-- Like Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white transform transition duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 group">
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.118l-2.625 10A2 2 0 0117.279 22H3.721c-1.146 0-2.07-.988-1.921-2.118l2.625-10A2 2 0 016.721 10h4.764M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5m7 2v8a2 2 0 002 2h2a2 2 0 002-2v-8m-7 0H3"></path></svg>
<span class="font-semibold">Like</span>
</button>
<!-- Reaction Buttons with Popover Effect -->
<div class="relative group">
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white transform transition duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="font-semibold">React</span>
</button>
<!-- Reactions Popover -->
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 rounded-full bg-white dark:bg-gray-800 shadow-xl opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300 transform scale-95 group-hover:scale-100 group-focus-within:scale-100 origin-bottom flex space-x-2">
<button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Love">
<span class="text-2xl">❤️</span>
</button>
<button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Haha">
<span class="text-2xl">😂</span>
</button>
<button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Wow">
<span class="text-2xl">😮</span>
</button>
<button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Sad">
<span class="text-2xl">😢</span>
</button>
<button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Angry">
<span class="text-2xl">😡</span>
</button>
</div>
</div>
</div>
</div>
Composants associés
Composant Like/Reaction Buttons
Un composant Web qui comporte des boutons J’aime et Réaction conçus dans un style skeuomorphe, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Like/Reaction Buttons
Un composant Like/Reaction Buttons de style Glassmorphism avec des effets réactifs et la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Like/Reaction Buttons
Un composant Like/Reaction Buttons avec le style de conception Glassmorphism, avec des effets de verre givré, un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.