Docs
→
Button
→
3D Button

3D Button

A glossy, pill-shaped 3D button with hover and press depth effects.

by Sarthak Kapila

Get started

Installation

Usage

3D Button Example

1import Button3D from "@/components/3D-button";
2

3export default function Example() {
4  return (
5    <Button3D 
6      label="Get started" 
7      link="/start" 
8      width={234} 
9      height={80}
10    />
11  );
12}

Understanding the component

The button simulates depth using layered gradients, inner shadows, and four decorative corner plates. Hover and press states adjust padding and shadows to create a convincing 3D movement.

Credits

By Sarthak Kapila.

Props

PropTypeDefaultDescription
labelstring"Get started"Text displayed inside the button.
linkstring"#"Optional link to wrap the button. Uses Next.js Link when not #.
heightnumber80Outer container height.
widthnumber234Outer container width.
classNamestring-Optional class name on the root container.
styleReact.CSSProperties-Inline styles for the root container.