✨ Social Media Icon Hover Effects

A stylish and responsive social media icon button layout built using HTML and CSS, featuring smooth hover animations, custom background gradient, and full mobile adaptability.

---

📌 Features

• 🎨 Custom gradient background: from #95f9c3 (left) to #0b3866 (right)
• 🖱️ Hover animations with 3D flip and color transitions
• 🌀 Floating effect using pseudo-elements
• 📱 Fully responsive layout – icons stack vertically on mobile screens
• 💻 Font Awesome icons for popular social media platforms

---

🧱 Project Structure

SocialMedia-Hover-Buttons/ │ ├── index.html # Main HTML structure └── style.css # All styling and responsive rules

---

Demo

socialMedia--Demo.mp4

🚀 How to Run

No setup needed! Just open index.html in your browser.

✅ Quick Start

git clone https://github.com/Arsh-pixel-cmd/Social-Media-Icon-.git
cd Social-Media-Icon-

Then open index.html.

---

💡 What You Learn from This Project

• Use of Font Awesome for scalable vector icons
• CSS gradient backgrounds and pseudo-elements
• Creating responsive flexbox layouts
• Smooth hover transitions and 3D transforms
• Applying media queries for mobile responsiveness

---

📱 Responsive Design

• On desktop: buttons appear in a row
• On mobile/tablet: buttons stack vertically for better UX

---

🙋‍♂️ Author

Arsh Mishra
Frontend Developer & Tech Enthusiast
LinkedIn | GitHub

---

📃 License

This project is open-source under the MIT License.