47+ Free Social media buttons examples in Tailwind CSS

by salvator

verywell mack pro

logout

Social Media button vertical dark style

Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Overview: A fixed, right-aligned sidebar component designed to display social media links (Facebook, Instagram, WhatsApp). It remains visible while scrolling and features an interactive "drawer-like" expansion effect on hover. Key Features: Sticky Positioning: Fixed vertically centered on the right edge of the viewport (fixed top-1/2 right-0). Isolated Hover Effect: When a user hovers over an icon, only that specific item expands to reveal the text and changes to its brand color. Stable Layout: Uses items-end flex alignment to ensure non-active icons remain perfectly stationary while one expands, preventing layout shifting. Smooth Transitions: Includes CSS transitions for width, background color, and text opacity. Tech Stack: Framework: Tailwind CSS (Utility classes). Icons: Inline SVGs. Interactivity: Pure CSS (hover states), no JavaScript required. Usage: Place this code block directly before the closing </body> tag to ensure it sits on top of all other content (z-50).