3D Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- 3D Pink Gradient Button -->
<button class="px-8 py-3 bg-gradient-to-b from-pink-500 to-pink-600 text-white font-bold rounded-lg shadow-[0_6px_0_#be185d] hover:from-pink-600 hover:to-pink-700 active:translate-y-[4px] active:shadow-[0_2px_0_#be185d] focus:outline-none focus:ring-2 focus:ring-pink-400 transition-all">
  Pink 3D
</button>

<!-- 3D Purple Gradient Button -->
<button class="px-8 py-3 bg-gradient-to-b from-purple-500 to-purple-600 text-white font-bold rounded-lg shadow-[0_6px_0_#7c3aed] hover:from-purple-600 hover:to-purple-700 active:translate-y-[4px] active:shadow-[0_2px_0_#7c3aed] focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all">
  Purple 3D
</button>

<!-- 3D Orange Gradient Button -->
<button class="px-8 py-3 bg-gradient-to-b from-orange-400 to-orange-500 text-white font-bold rounded-lg shadow-[0_6px_0_#c2410c] hover:from-orange-500 hover:to-orange-600 active:translate-y-[4px] active:shadow-[0_2px_0_#c2410c] focus:outline-none focus:ring-2 focus:ring-orange-300 transition-all">
  Orange 3D
</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 3D Button

Buttons with 3D depth effects and push animations.

## Variants

| Variant | Description |
|---------|-------------|
| [Colored](./colored/) | Colored 3D buttons with gradients |

## Quick Start

```html
<style>
  .btn-3d {
    position: relative;
    box-shadow: 0 6px 0 #1d4ed8;
    transition: all 0.1s;
  }
  .btn-3d:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #1d4ed8;
  }
</style>

<button class="px-8 py-3 btn-3d bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700">
  3D Button
</button>

<!-- Or with Tailwind shadow extensions -->
<button class="px-8 py-3 bg-blue-600 text-white font-bold rounded-lg shadow-[0_6px_0_#1d4ed8] hover:shadow-[0_4px_0_#1d4ed8] active:translate-y-[4px] active:shadow-[0_2px_0_#1d4ed8]">
  3D Button
</button>
```

## Related

- [Basic Button](../basic-button/) - Core button styles
- [Animated Button](../animated-button/) - General animations