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
Follow Button Component
A responsive Follow Button Component designed with Material Design principles, featuring support for dark mode and tailored styles using Tailwind CSS.
Follow Button Component - Monospace/Developer Style
A complex, interactive follow button component designed for news/journalism websites, featuring a monospace/developer aesthetic with jewel-tone colors and full responsiveness, including dark mode support.
Follow Button Component
A follow button component designed in the brutalism style with high contrast and a raw, bold appearance. It is responsive and supports dark themes.