Home
Juan D. Cortorreal
Sticky Floating Social Bar

Sticky Floating Social Bar

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).

This tailwind example is contributed by Juan D. Cortorreal, on 23-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Social media links,

Social media buttons

Author Juan D. Cortorreal

Fork Fullscreen

<div class="fixed top-1/2 right-0 -translate-y-1/2 z-50 flex flex-col gap-2 items-end">
    
    <a href="https://facebook.com" target="_blank" class="group flex items-center justify-end w-12 h-12 bg-gray-800 text-white rounded-l-lg hover:bg-[#1877F2] hover:w-36 transition-all duration-300 shadow-lg overflow-hidden relative">
        <span class="absolute left-4 opacity-0 group-hover:opacity-100 transition-opacity font-bold whitespace-nowrap delay-100">Facebook</span>
        <div class="w-12 h-12 flex items-center justify-center absolute right-0 min-w-[3rem]"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        </div>
    </a>

<a href="https://instagram.com" target="_blank" class="group flex items-center justify-end w-12 h-12 bg-gray-800 text-white rounded-l-lg hover:bg-[#E4405F] hover:w-36 transition-all duration-300 shadow-lg overflow-hidden relative">
        <span class="absolute left-4 opacity-0 group-hover:opacity-100 transition-opacity font-bold whitespace-nowrap delay-100">Instagram</span>
        <div class="w-12 h-12 flex items-center justify-center absolute right-0 min-w-[3rem]">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4 4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
        </div>
    </a>

<a href="https://wa.me/1234567890" target="_blank" class="group flex items-center justify-end w-12 h-12 bg-gray-800 text-white rounded-l-lg hover:bg-[#25D366] hover:w-36 transition-all duration-300 shadow-lg overflow-hidden relative">
        <span class="absolute left-4 opacity-0 group-hover:opacity-100 transition-opacity font-bold whitespace-nowrap delay-100">WhatsApp</span>
        <div class="w-12 h-12 flex items-center justify-center absolute right-0 min-w-[3rem]">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
        </div>
    </a>

</div>

Related Examples

Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

9 months ago

1.6k
Continue with Discord button
Login with the Discord button for social login

Author:
Anonymous

1 year ago

2.9k
Simple Footer

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.5k
hero page
by salvator

Author:
Baraka Salvator

6 months ago

1.3k
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Author:
Arturo Lizana

7 months ago

1.1k
modern portifolio
by salvator

Author:
Baraka Salvator

6 months ago

659
Social share icons

Author:
Amit Pachange

2 years ago

10.9k
Footer with social media buttons

Author:
Sophia Baker

3 years ago

13.7k
LoginModal-1
Popup modal with close

Author:
Rohan Babu

1 year ago

3.5k
Game changer
by salvator

Author:
Baraka Salvator

6 months ago

698
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
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.

Author:
Homayoun

1 month ago

145
logout
logout

Author:
Uwera Dorcas

6 months ago

470

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components