neumorphism soft-ui button press shadow haptic neumorphic toggle or action button soft UI control panel playful press-feedback on icons buttons lack tactile click feedback want physical depth without custom images need soft-UI aesthetic with accessibility intent
Soft Button
Fetch snippet JSON:
curl https://webspire.de/snippets/soft-ui/button.json Preview
Background
Customize
Quick Start
<button class="soft-btn px-6 py-3 text-slate-700 font-semibold">Click me</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion, prefers-color-scheme
- Size
- 710 bytes · 38 lines
- Custom Properties
-
--soft-bg--soft-light--soft-shadow--soft-radius - Classes
-
.soft-btn
neumorphism soft-ui button press shadow haptic
The shadow inverts on :active — extruded idle → inset pressed. The CSS custom property --soft-bg must match the surrounding background for the illusion to work.
Accessibility note: Soft buttons have low inherent affordance (no border, flat appearance). Add a visible label,
aria-label, or icon to communicate interactivity. Combine with a visible focus ring (:focus-visible) for keyboard users.
Primary action
<div style="background: oklch(93% 0.01 75); padding: 3rem;">
<button class="soft-btn px-8 py-4 rounded-2xl text-slate-700 font-semibold text-base">
Get started
</button>
</div>Icon button
<button class="soft-btn rounded-full p-4" aria-label="Add item">
<svg class="h-5 w-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
</button>