Depth Button

Tactile and satisfying. This button sits raised above the surface with a realistic shadow, then physically presses down when you click it. That subtle depth shift gives real feedback—you can almost feel it. Perfect for game UIs, playful apps, or anywhere you want buttons that feel clickable. The shadow and highlight adjust dynamically to sell the illusion. It's skeuomorphic design done tastefully.

Depth Button preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/depth-button.json

npx shadcn@latest add https://www.shadcn.io/registry/depth-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/depth-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/depth-button.json

Related Components

FAQ