3D Button Colored

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
40
41
42
43
44
45
46
47
48
49

# 3D Button Colored

Colored 3D buttons with gradients and a pressable depth effect.

## Preview

Open `preview.html` for a standalone demonstration of this variant.

## Features

- 3D depth / press animation
- Gradient color treatments
- Visible focus states
- Native `<button>` element

## Usage

```bash
npx devsnips add Tailwind/Components/Buttons/3d-button/colored
```

Copy the markup from `code.html` into a Tailwind project. No JavaScript required for the core presentation.

## Customization

- Gradient stops and background colors
- Shadow / offset values that create the 3D effect
- Padding, radius, typography
- Focus ring utilities

## Accessibility

- Native `<button>`
- Focus-visible styles present in the markup

## Responsive Behavior

Fluid; works at all common viewport sizes.

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` — copy/paste snippet
- `preview.html` — standalone demo
- `metadata.json` — metadata
- `README.md` — this file