Premium Neumorphic Sliding Drawer Share Button
Source: Dev.to
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
(Insert live demo or GIF if available)
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 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: 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! 👇