---
title: "Social connect — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Akshay M · Buttons. The Social Connects Button is a modern, animated social-link component designed to make your website’s social interactions effortless…"
canonical: "https://framer.elliotli.dev/component/social-connect"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Social connect

# Social connect

[View on Framer](https://framer.com/marketplace/components/social-connect/?via=elliot-li)

![Social connect preview image 1](https://framer.elliotli.dev/og/component/social-connect/f330a5ab90a7fb5f/1600x1200.jpg)

## Summary

The Social Connects Button is a modern, animated social-link component designed to make your website’s social interactions effortless and visually engaging.

## Description

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.

### Key Features

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

### How to Use

1.  **Place the component** inside your layout or section.
    
2.  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
        
3.  Click each **social icon** to update its **URL field** with your link.
    
4.  Replace icons with any custom SVG by simply swapping the asset.
    
5.  Publish—your interactive social button will animate perfectly on hover.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-9m8zv2pk-QqtSmw2GiFWeEAFK4XIJS5TzgRuSy4)

## Rank history [How rankings work →](/terms#rankings)

-   All · #10501

## Details

- **Author**: Akshay M
- **Price**: $3.00
- **Published**: 2025-12-09
- **Updated**: 2025-12-09
- **Added**: 2025-12-02
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything