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

npx rareui@latest add neumorphism-3d-button
Or copy the component source manually into components/rareui/neumorphism3DButton.tsx.

​
Usage

import { Neumorphism3DButton } from '@/components/rareui/neumorphism3DButton';

export default function App() {
  return (
    <Neumorphism3DButton onClick={() => alert('Pressed!')}>
      Press Me
    </Neumorphism3DButton>
  );
}

​
Props

​
children
React.ReactNode
default:"Click Me"
The content rendered inside the button.
​
onClick
() => void
Callback fired when the button is clicked.
​
disabled
boolean
default:"false"
When true, the native button disabled attribute is applied.

​
Examples

​
Basic

<Neumorphism3DButton>Click Me</Neumorphism3DButton>

​
With click handler

<Neumorphism3DButton onClick={() => console.log('pressed')}>
  Confirm
</Neumorphism3DButton>

​
Disabled state

<Neumorphism3DButton disabled>
  Unavailable
</Neumorphism3DButton>

​
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us