Neumorphism is one of the most visually satisfying design trends — that soft, raised, physical feel that makes UI elements look touchable.
I combined it with a sliding drawer share button. The result is something you just want to hover over repeatedly. 🎁
What I Built
Premium Neumorphic Sliding Drawer Share Button — a high-fidelity Soft UI component featuring:
✅ Realistic raised "pill" with neumorphic box-shadow layering
✅ Pill slides horizontally on hover to reveal a recessed social icon tray
✅ Neumorph-in/out states for tactile depth effect
✅ Social icons (WhatsApp, Instagram, X, Facebook) in the revealed tray
✅ Fluid CSS transitions — zero JavaScript dependency
✅ Complex CSS box-shadow engineering for the 3D raised effect
✅ Built with Tailwind CSS
✅ Perfect for portfolios, blogs, and any soft UI design system
See It in Action
The Design Breakdown
The Neumorphic Pill
The default state is a soft raised pill — light grey background with carefully layered box shadows creating a realistic extruded effect. It looks like it's physically sitting above the page surface.
Sliding Drawer Mechanism
On hover, the raised pill slides horizontally to reveal a recessed tray underneath — the tray uses inset shadows to look pressed into the surface. The contrast between the raised pill and the recessed tray creates a beautiful mechanical feel, like a physical drawer opening.
CSS Box-Shadow Engineering
The entire 3D effect is achieved through complex CSS box-shadow layering — light shadow on top-left, dark shadow on bottom-right for the raised state, inverted for the recessed state. No images, no SVGs, no JavaScript — pure CSS.
Zero JavaScript
The entire interaction — hover detection, sliding animation, tray reveal — is handled with pure CSS transitions and Tailwind's group-hover: utilities. Lightweight and performant.
Why Neumorphism Still Works
While heavily criticized for accessibility issues when misused, neumorphism applied thoughtfully — as an interactive accent rather than a primary UI style — creates moments of genuine delight. This button is a perfect example: it's a small, focused use of the style that surprises and satisfies without compromising usability.
Where to Use This
Portfolio sites — a share button that becomes a design statement
Blogs and articles — encourage sharing with a memorable interaction
Soft UI design systems — consistent with neumorphic dashboards
Landing pages — a unique detail that makes pages memorable
Get the Free Code
👉 Get the free code → Premium Neumorphic Sliding Drawer 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!
Using this in your project? Drop a link in the comments! 👇
→ Browse all free components at CodeBar Library
Top comments (0)