button 3d inset shadow tactile press physical depth premium CTA with physical feel macOS/iOS style button depth tactile click feedback on primary actions dark UI with embossed buttons flat buttons lack visual depth need physical press feedback without JS want iOS/macOS style inset shadow button
Button 3D
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/button-3d.json Background
Customize
Quick Start
<button class="button-3d">Get Started</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1264 bytes · 54 lines
- Custom Properties
-
--btn3d-from--btn3d-to--btn3d-border--btn3d-text--btn3d-highlight--btn3d-lowlight - Classes
-
.button-3d
button 3d inset shadow tactile press physical depth
A physical button with two-layer depth: ::after pseudo-element applies inset box-shadow — bright highlight on top edge, dark lowlight on bottom. On :active, the shadows invert, creating a pressed-in illusion. Background uses a subtle vertical gradient for extra dimension.
Dark button (default)
<button class="button-3d">Get Started</button>Light variant
<button class="button-3d"
style="--btn3d-from: oklch(0.98 0 0); --btn3d-to: oklch(0.95 0 0); --btn3d-border: oklch(0.85 0.005 75); --btn3d-text: oklch(0.3 0.01 75); --btn3d-highlight: rgba(255,255,255,0.6); --btn3d-lowlight: rgba(0,0,0,0.12);">
Learn more
</button>Accent color
<button class="button-3d"
style="--btn3d-from: oklch(0.55 0.2 260); --btn3d-to: oklch(0.45 0.2 260); --btn3d-border: oklch(0.38 0.18 260);">
Subscribe
</button>