Social-UI-Button

🚀 Follow @wearepixelflow on Instagram for more premium UI animations and web development content.

Social Flip Button

A modern 3D Social Flip Button built with React, Framer Motion, Tailwind CSS, and React Icons. Each button displays a letter on the front and smoothly flips to reveal its corresponding social media icon when hovered. The component also features animated tooltips and subtle border animations for a premium UI experience.

✨ Features

• 🎴 Smooth 3D flip animation
• 🚀 Built with Framer Motion
• 🎨 Tailwind CSS styling
• 💬 Animated tooltips
• 🌙 Light & Dark mode support
• ⚡ Sequential hover animation
• 🔗 Supports links and custom click handlers
• 🧩 Easily customizable
• 📱 Responsive design

---

Preview

👉 Click here to watch the animation

Technologies Used

• React
• TypeScript
• Framer Motion
• Tailwind CSS
• React Icons

---

Installation

Clone the repository:

git clone https://github.com/wearepixelflow/social-cta.git

Navigate into the project:

cd social-flip-button

Install dependencies:

npm install

Run the development server:

npm run dev

---

Dependencies

npm install framer-motion react-icons

---

Folder Structure

src/
│
├── components/
│   └── SocialFlipButton.tsx
│
├── lib/
│   └── utils.ts
│
└── app/
    └── page.tsx

---

Usage

Import the component:

import SocialFlipButton from "@/components/SocialFlipButton";

Render it:

<SocialFlipButton />

---

Custom Buttons

You can provide your own social items.

const items = [
  {
    letter: "G",
    icon: <FaGithub />,
    label: "GitHub",
    href: "https://github.com",
  },
  {
    letter: "X",
    icon: <FaTwitter />,
    label: "Twitter",
    href: "https://twitter.com",
  },
];

<SocialFlipButton items={items} />;

---

Props

Prop	Type	Description
items	SocialItem[]	Custom social buttons
className	string	Wrapper styling
itemClassName	string	Individual button styling
frontClassName	string	Front face customization
backClassName	string	Back face customization

---

Customization

You can easily customize:

• Colors
• Border radius
• Animation speed
• Spring physics
• Tooltip style
• Icons
• Labels
• Container spacing
• Button size
• Hover delay

---

Built With

• React
• TypeScript
• Framer Motion
• Tailwind CSS
• React Icons

---

Contributing

Contributions are welcome!

1. Fork the repository.
2. Create a feature branch.
3. Commit your changes.
4. Push your branch.
5. Open a Pull Request.

---

Author

Made by Pixelflow with ❤️ for developers who love creating beautiful UI interactions.