Follow Button with Microinteractions
Responsive Follow Button Component with dark theme support and microinteractions, designed for social media applications using Tailwind CSS. Features monochromatic color scheme and complex interactive elements.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative inline-block group">
<button class="px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full transition-all duration-300 ease-in-out transform group-hover:scale-105 group-active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:group-hover:bg-blue-600 dark:focus:ring-blue-600">
Follow
</button>
<div class="absolute inset-0 rounded-full bg-blue-500 opacity-0 blur transition-all duration-500 ease-in-out group-hover:opacity-70"></div>
</div>
</div>Related Components
Retro Follow Button Component
A simple, responsive follow button component with a retro/vintage aesthetic, complementary color scheme, and gaming purpose, including dark mode support.
Follow Button
Dark Mode UI Follow Button Component with responsive effects and dark theme support.
Follow Button Component
A responsive follow/unfollow button component suitable for event and conference websites, featuring gradient transitions, dark mode support, and a bright accent color. It includes a subtle hover effect and changes text and background on click (simulated).