Skip to main content

Overview

Neumorphism 3D Button stacks multiple box-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

Or copy the component source manually into 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.