ThreeDButton is a minimal 3D button with a slim dark base, a lifted zinc face, and a sliding click sheen powered by Motion. Automatically inverts to a white-deck / dark-face look in dark mode via Tailwind dark: classes.

Preview

ThreeDButton

Click to press

Custom Label

Interactive

Install

Add the item with the shadcn CLI.

npx shadcn@latest add @evilbuttons/3d-button

Usage

[]txt

import { ThreeDButton } from "@/components/evil-buttons/3d-button";

export function ButtonDemo() {
  return (
    <ThreeDButton>
      Continue
    </ThreeDButton>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	`"Continue"`	The visible button label or content.
`className`	`string`	-	Extra classes passed to the button.

All other <button> attributes (onClick, disabled, type, etc.) are forwarded.

Registry

The registry item includes components/evil-buttons/3d-button.tsx and installs motion, clsx, and tailwind-merge as dependencies. The component imports cn from @/lib/utils.