haptic press 3d shadow button depth physical skeuomorphic primary CTA button with physical feedback arcade-style game button haptic-style action button in dashboard confirm or submit trigger flat buttons lack any physical feedback metaphor hover lift alone feels arbitrary without press collapse want skeuomorphic press without images or 3D libraries
Haptic Press
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/haptic-press.json Preview
Background
Customize
Quick Start
<button class="haptic-press rounded-xl bg-indigo-600 px-8 py-4 text-white font-bold">Submit</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 720 bytes · 34 lines
- Custom Properties
-
--haptic-depth--haptic-color--haptic-duration - Classes
-
.haptic-press
haptic press 3d shadow button depth physical skeuomorphic
The bottom shadow (0 Npx 0) acts as the physical edge of the button. On :active, the element moves down by --haptic-depth while the shadow collapses from 6px to 1px — simulating a physical press into the surface.
Hover lifts the button 2px above rest position with an expanded shadow, completing the push-down interaction cycle: lift → press → rest.
Primary CTA
<button class="haptic-press rounded-2xl bg-indigo-600 px-10 py-4 text-white font-bold text-lg">
Get started
</button>Custom depth and color
<!-- Amber button with custom depth -->
<button class="haptic-press rounded-xl bg-amber-400 px-8 py-3 text-amber-900 font-semibold"
style="--haptic-depth: 6px; --haptic-color: oklch(55% 0.15 75);">
Pay now
</button>
<!-- Subtle variant -->
<button class="haptic-press rounded-lg bg-white border border-slate-200 px-6 py-2.5 text-slate-700 font-medium text-sm"
style="--haptic-depth: 3px; --haptic-color: oklch(80% 0.02 250); --haptic-duration: 60ms;">
Secondary action
</button>