Overview
Neumorphism 3D Button stacks multiplebox-shadow layers — including directional outer shadows and complex inset shadows — to simulate physical depth. Pressing the button triggers a realistic inward-push effect via shadow inversion, scale(0.975), and a gradient clip-path transition.
Installation
components/rareui/neumorphism3DButton.tsx.
Usage
Props
React.ReactNode
default:"Click Me"
The content rendered inside the button.
() => void
Callback fired when the button is clicked.
boolean
default:"false"
When
true, the native button disabled attribute is applied.Examples
Basic
With click handler
Disabled state
Features
Realistic 3D depth
Multiple outer
box-shadow layers simulate a light source hitting a raised surface from the top-left.Press animation
On
mousedown, outer shadows collapse to zero and inset shadows deepen to replicate a physical button press.Gradient text
Button label uses
background-clip: text with a light-to-dark gradient for a metallic engraved look.Dark mode support
Tailwind
dark: variants independently tune shadow opacities and background gradients for dark themes.