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.
HTML Code
<style>
.skeuomorphic {
background-color: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
border-radius: 10px;
padding: 10px;
}
.skeuomorphic:active {
box-shadow: inset 7px 7px 15px #bebebe, inset -7px -7px 15px #ffffff;
}
.dark .skeuomorphic {
background-color: #333;
box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
}
.dark .skeuomorphic:active {
box-shadow: inset 7px 7px 15px #222, inset -7px -7px 15px #444;
}
</style>
<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-black">
<div class="flex space-x-4 skeuomorphic dark:skeuomorphic">
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
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 21c-.64-.149-1.28-.293-1.92-.434L13 18H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v4zm-2 0h2"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Like</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Love</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14.828 14.828a4 4 0 01-5.656 0M9 21v-6a2 2 0 012-2h2a2 2 0 012 2v6m-6 0h6"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Haha</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Wow</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Sad</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<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="text-gray-700 dark:text-gray-300">Angry</span>
</button>
</div>
</div>Related Components
NeumorphismLikeReactionButtons
Responsive Like/Reaction Buttons Component for blog/content with dark theme support and Neumorphism design.
Like/Reaction Buttons Component
A web component featuring Like and Reaction buttons with microinteractions and support for dark theme using Tailwind CSS.