프리미엄 네오모픽 슬라이딩 드로어 공유 버튼
Source: Dev.to
Neumorphism은 가장 시각적으로 만족스러운 디자인 트렌드 중 하나입니다—부드럽고, 떠오른 듯한 물리적 느낌이 UI 요소를 터치할 수 있게 보이게 합니다. 저는 이를 슬라이딩 드로어 공유 버튼과 결합했습니다. 결과물은 반복해서 호버하고 싶어지는 느낌이죠. 🎁
What I Built
Premium Neumorphic Sliding Drawer Share Button — 고충실도 Soft UI 컴포넌트로 다음을 특징으로 합니다:
- ✅ 현실감 있는 떠오른 “pill” 형태와 뉴모픽 박스‑쉐도우 레이어링
- ✅ 호버 시 가로로 슬라이드하여 움푹 들어간 소셜 아이콘 트레이를 표시
- ✅ 뉴모프‑인/아웃 상태로 촉각적인 깊이 효과 제공
- ✅ 트레이에 표시되는 소셜 아이콘 (WhatsApp, Instagram, X, Facebook)
- ✅ 순수 CSS 전환—JavaScript 의존성 전무
- ✅ 3D 떠오른 효과를 위한 복잡한 CSS 박스‑쉐도우 엔지니어링
- ✅ Tailwind CSS 사용
- ✅ 포트폴리오, 블로그, 그리고 모든 Soft UI 디자인 시스템에 최적
See It in Action
(Insert live demo or GIF if available)
The Design Breakdown
The Neumorphic Pill
기본 상태는 부드럽게 떠오른 pill 형태—연한 회색 배경에 정교하게 레이어링된 박스 쉐도우가 현실감 있는 돌출 효과를 만듭니다. 페이지 표면 위에 물리적으로 놓여 있는 듯 보입니다.
Sliding Drawer Mechanism
호버하면 떠오른 pill이 가로로 슬라이드하면서 아래에 있는 움푹 들어간 트레이가 드러납니다—트레이는 인셋 쉐도우를 사용해 표면에 눌린 듯한 느낌을 줍니다. 떠오른 pill과 움푹 들어간 트레이 사이의 대비가 마치 물리적인 서랍이 열리는 듯한 아름다운 기계적 느낌을 만들어냅니다.
CSS Box‑Shadow Engineering
전체 3D 효과는 복잡한 CSS 박스‑쉐도우 레이어링을 통해 구현됩니다—떠오른 상태에서는 왼쪽 위에 밝은 쉐도우, 오른쪽 아래에 어두운 쉐도우를 두고, 움푹 들어간 상태에서는 반대로 적용합니다. 이미지, SVG, JavaScript 없이 순수 CSS만 사용합니다.
Zero JavaScript
상호작용—호버 감지, 슬라이드 애니메이션, 트레이 표시—은 순수 CSS 전환과 Tailwind의 group-hover: 유틸리티만으로 처리됩니다. 가볍고 성능이 뛰어납니다.
Why Neumorphism Still Works
남용될 경우 접근성 문제로 비판받지만, 뉴모프를 신중하게 적용하면—주된 UI 스타일이 아니라 인터랙티브한 강조 요소로—진정한 즐거움을 선사합니다. 이 버튼은 스타일을 작고 집중적으로 사용해 놀라움과 만족을 주면서도 사용성을 해치지 않는 완벽한 예시입니다.
Where to Use This
- 포트폴리오 사이트 — 디자인 선언이 되는 공유 버튼
- 블로그와 기사 — 기억에 남는 인터랙션으로 공유 유도
- Soft UI 디자인 시스템 — 뉴모픽 대시보드와 일관성 유지
- 랜딩 페이지 — 페이지를 기억에 남게 하는 독특한 디테일
Get the Free Code
👉 Get the free code → Premium Neumorphic Sliding Drawer Share Button
회원가입 필요 없음. 복사·붙여넣기만 하면 바로 사용 가능. 🚀
What is CodeBar Library?
CodeBar Library는 디자인 품질에 신경 쓰는 개발자를 위해 만든 무료·프리미엄 UI 컴포넌트 컬렉션입니다.
Available tech stacks
- HTML/CSS
- Tailwind CSS
- React
- Framer Motion
- GSAP animations
- Bootstrap
모두 프로덕션에 바로 사용할 수 있는 복사·붙여넣기 친화적인 형태입니다. 포트폴리오, SaaS 제품, 클라이언트 프로젝트 등 무엇을 만들든 여러분에게 맞는 것이 있을 겁니다.
What’s Coming Next?
- 🔨 Full Stack Project Starter Kits
- 🎨 Premium UI Templates (Landing Pages, Dashboards)
- ⚡ 매주 새로운 무료 Tailwind 컴포넌트
유용했다면 ❤️를 눌러 주세요, 그리고 매주 새로운 무료 컴포넌트를 받아보세요!
프로젝트에 사용했나요? 댓글에 링크를 남겨 주세요! 👇