Morphing Social Share Button

Share buttons are usually an afterthought — a row of boring icons dumped at the bottom of a page.
I wanted a share button that surprises users and makes sharing feel fun. So I built one that morphs. 🎁

What I Built
Morphing Social Share Button — a smooth, CSS-only hover effect built with Tailwind's group utilities featuring:
✅ Solid "SHARE" pill transforms into an outlined container on hover
✅ Social media icons (WhatsApp, Instagram, X, Facebook) revealed on hover
✅ Main text smoothly shrinks into a top badge
✅ Pure CSS — zero JavaScript, zero libraries
✅ Built with Tailwind's group and group-hover utilities
✅ Perfect for blog posts, articles, product pages, and portfolios

See It in Action

The Design Breakdown
The Morph Effect
The magic — on hover, a solid green "SHARE" pill morphs into an outlined container that reveals social icons inside. The "SHARE" text doesn't disappear — it shrinks into a small badge floating above the container. Smooth, satisfying, unexpected.
Pure CSS with Tailwind Group Utilities
No JavaScript. No event listeners. Just Tailwind's group and group-hover utilities doing all the heavy lifting. The entire animation is CSS transitions — lightweight and performant.
Social Icons Revealed
WhatsApp, Instagram, X (Twitter), and Facebook icons fade in as the container expands — each with their brand colors for instant recognition.
Why This Works
Standard share buttons get ignored because they're predictable. This one creates a micro-moment of delight — users notice it, interact with it, and are more likely to actually share.

Where to Use This

Blog posts — encourage readers to share articles
Product pages — social proof through sharing
Portfolio projects — let visitors share your work
News articles — increase content distribution

Get the Free Code
👉 Get the free code → Morphing Social Share Button
No sign-up required. Copy, paste, ship. 🚀

What is CodeBar Library?
CodeBar Library is a growing collection of free and premium UI components built for developers who care about design quality.
Available tech stacks:

HTML/CSS
Tailwind CSS
React
Framer Motion
GSAP animations
Bootstrap

Everything is production-ready and copy-paste friendly. Whether you're building a portfolio, a SaaS product, or a client project — there's something for you.

What's Coming Next?

🔨 Full Stack Project Starter Kits
🎨 Premium UI Templates (Landing Pages, Dashboards)
⚡ More free Tailwind components every week

Drop a ❤️ if you found this useful and follow for more free components every week!
Used this in your project? Drop a link in the comments! 👇
→ Browse all free components at CodeBar Library