A sleek interactive social button that expands on hover to reveal multiple social icons. Fully customizable and supports adding your own social links to each logo.
Make it with Workshop
Build your own component with AI
The Social Connects Button is a modern, animated social-link component designed to make your website’s social interactions effortless and visually engaging. Built with smooth hover transitions, it expands from a compact button into a clean horizontal bar displaying your social icons—perfect for portfolios, agencies, personal brands, SaaS platforms, and landing pages.
This component allows complete flexibility, You can attach custom social URLs to every logo, replace icons, change colors, and adjust text to match your brand identity. The animation is minimal, polished, and built to work across all devices, ensuring a premium experience on desktop, tablet, and mobile.
Smooth Hover Reveal Animation Button expands to show LinkedIn, Instagram, Facebook, Twitter, or any custom icons you choose.
Attach Your Own Social Links Simply update each icon with your preferred URL—perfect for brands, founders, creators, and product pages.
Fully Customizable Edit the primary label, icons, colors, backgrounds, and sizing easily via the component panel.
Responsive on All Devices Designed to scale smoothly across different screen widths without breaking the layout.
Swappable Icons Replace default icons with any SVG or image to match your brand.
Place the component inside your layout or section.
Open the component controls panel to edit:
Button text (e.g., Social Connects, Follow Me, Stay Connected)
Background and hover colors
Icon list and positions
Click each social icon to update its URL field with your link.
Replace icons with any custom SVG by simply swapping the asset.
Publish—your interactive social button will animate perfectly on hover.