Like/Reaction Buttons
Like/Reaction Buttons Component with Microinteractions, Complementary color scheme, Simple complexity, for Social Media purpose.
HTML Code
<div class="flex items-center justify-center space-x-4">
<!-- Light mode: Like button -->
<button class="flex items-center space-x-1 text-blue-600 dark:text-blue-400 focus:outline-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
</svg>
<span>Like</span>
</button>
<!-- Dark mode: Like button -->
<button class="flex items-center space-x-1 text-gray-400 dark:text-gray-600 dark:hover:text-blue-400 focus:outline-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
</svg>
<span>Like</span>
</button>
<button class="flex items-center space-x-1 text-red-600 dark:text-red-400 focus:outline-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
</svg>
<span>Love</span>
</button>
</div>Related Components
Like/Reaction Buttons Component
A responsive Like/Reaction Buttons Component with dark mode support using Tailwind CSS. It features a complementary color scheme suitable for a dashboard, with moderate complexity for interactive reaction buttons.
Neumorphic Like/Reaction Buttons
A simple, responsive set of like/reaction buttons with a neumorphic design style, jewel tone color scheme, and dark mode support, suitable for finance/banking interfaces.
Skeuomorphic Reaction Buttons
A set of like and reaction buttons with a Skeuomorphic design style, supporting responsive layouts and dark mode. The buttons are implemented purely with HTML and Tailwind CSS, with no JavaScript. Dark mode is handled via CSS classes. Placeholder images are used for avatars.