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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-emerald-50 dark:bg-emerald-950 p-4 font-sans">
<div class="flex space-x-4 p-4 rounded-3xl shadow-xl dark:shadow-2xl bg-emerald-100 dark:bg-emerald-900
shadow-emerald-200/80 dark:shadow-emerald-900/80
dark:shadow-inner-xl dark:shadow-emerald-800/80">
<!-- Like Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full
bg-emerald-100 dark:bg-emerald-900
shadow-neumorphic-light dark:shadow-neumorphic-dark
text-emerald-700 dark:text-emerald-300
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
transition-all duration-300 ease-in-out">
<svg class="w-6 h-6" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</button>
<!-- Thumbs Up Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full
bg-emerald-100 dark:bg-emerald-900
shadow-neumorphic-light dark:shadow-neumorphic-dark
text-emerald-700 dark:text-emerald-300
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
transition-all duration-300 ease-in-out">
<svg class="w-6 h-6" 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 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
</svg>
</button>
<!-- Thumbs Down Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full
bg-emerald-100 dark:bg-emerald-900
shadow-neumorphic-light dark:shadow-neumorphic-dark
text-emerald-700 dark:text-emerald-300
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
transition-all duration-300 ease-in-out">
<svg class="w-6 h-6 transform rotate-180" 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 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
</svg>
</button>
</div>
</div>
<style>
/* Neumorphic Shadows (Tailwind custom values) */
/* Light Mode */
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #98d8be, -6px -6px 12px #c9fff2;
}
.hover\:shadow-neumorphic-inset-light:hover {
box-shadow: inset 4px 4px 8px #98d8be, inset -4px -4px 8px #c9fff2;
}
/* Dark Mode */
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #0a3d2e, -6px -6px 12px #33a77a;
}
.dark .hover\:shadow-neumorphic-inset-dark:hover {
box-shadow: inset 4px 4px 8px #0a3d2e, inset -4px -4px 8px #33a77a;
}
/* General neumorphic base for the container */
.shadow-xl {
box-shadow: 10px 10px 20px rgba(0,0,0,0.1), -10px -10px 20px rgba(255,255,255,1); /* Light mode base */
}
.dark .shadow-2xl {
box-shadow: 10px 10px 20px rgba(0,0,0,0.5), -10px -10px 20px rgba(45,45,45,1); /* Dark mode base */
}
/* Specific overrides for the emerald background */
.shadow-emerald-200\/80 {
box-shadow: 10px 10px 20px rgba(181, 237, 212, 0.8), -10px -10px 20px rgba(239, 255, 247, 1);
}
.dark .shadow-emerald-900\/80 {
box-shadow: 10px 10px 20px rgba(18, 59, 45, 0.8), -10px -10px 20px rgba(41, 107, 81, 1);
}
/* Inner shadow for the main container (more pronounced in dark mode) */
.dark .shadow-inner-xl {
box-shadow: inset 5px 5px 10px #0a3d2e, inset -5px -5px 10px #33a77a;
}
</style>Related Components
Like/Reaction Buttons Component
A Like/Reaction Buttons Component designed in Brutalism style with Tailwind CSS, featuring responsive effects and dark theme support.
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.
Like/Reaction Buttons Component
Like/Reaction Buttons Component coded in HTML with Tailwind CSS, with a Brutalism design, Earth tones color scheme, and Moderate complexity, suitable for E-commerce. Includes responsive design and dark mode support.