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.
HTML Code
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="relative group flex items-center justify-center px-6 py-3 font-bold uppercase tracking-wider text-xl text-yellow-900 dark:text-yellow-100 transition-all duration-300 ease-in-out
bg-gradient-to-br from-yellow-400 to-orange-500
dark:from-yellow-700 dark:to-orange-800
border-2 border-yellow-700 dark:border-yellow-900
shadow-lg shadow-yellow-500/50 dark:shadow-yellow-900/50
transform skew-x-[-10deg] hover:skew-x-0
overflow-hidden
rounded-lg
focus:outline-none focus:ring-4 focus:ring-yellow-600 dark:focus:ring-yellow-800">
<span class="relative z-10 flex items-center gap-2">
<svg class="h-6 w-6 text-yellow-900 dark:text-yellow-100 transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300" 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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<span class="transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300">Follow Player</span>
</span>
<div class="absolute inset-0 bg-yellow-300 dark:bg-yellow-600 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"></div>
<div class="absolute inset-0 border-2 border-yellow-800 dark:border-orange-900 border-dashed opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none transform scale-105 group-hover:scale-100"></div>
<span class="absolute top-0 left-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
<span class="absolute bottom-0 right-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform translate-x-1/2 translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
</button>
</div>Related Components
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.
Glassmorphism Follow Button
Glassmorphism Follow Button Component for Social Media with Dark Theme
Follow Button Component
A clean, minimalist 'Follow' button designed with a retro/vintage color palette, suitable for a dashboard or profile page. It features an interactive hover state and dark mode support, embodying Swiss/International typography principles.