Gradient Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- Linear Gradient Button -->
<button class="px-6 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-opacity">
  Blue Gradient
</button>

<!-- Purple Pink -->
<button class="px-6 py-2.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-medium rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-opacity">
  Purple Pink
</button>

<!-- Sizes -->
<button class="px-3 py-1.5 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs font-medium rounded-md hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-opacity">
  Small
</button>

<button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-sm font-medium rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-opacity">
  Default
</button>

<button class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-base font-medium rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-opacity">
  Large
</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
50
51
52
53
54
55
56
57
58
59

# Gradient Button

A collection of gradient button components with various styles and effects.

## Variants

| Variant | Description |
|---------|-------------|
| [Linear](./linear/) | Two-color horizontal gradient buttons |
| [Shadow](./shadow/) | Gradient buttons with colored shadows |

## Quick Start

```html
<!-- Basic Linear Gradient -->
<button class="px-6 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Click Me
</button>
```

## Gradient Directions

| Class | Direction |
|-------|-----------|
| `bg-gradient-to-r` | Left → Right |
| `bg-gradient-to-l` | Right → Left |
| `bg-gradient-to-t` | Bottom → Top |
| `bg-gradient-to-b` | Top → Bottom |
| `bg-gradient-to-tr` | Bottom Left → Top Right |
| `bg-gradient-to-tl` | Bottom Right → Top Left |
| `bg-gradient-to-br` | Top Left → Bottom Right |
| `bg-gradient-to-bl` | Top Right → Bottom Left |

## Accessibility

- All buttons include visible focus rings
- Use `disabled` attribute for disabled state
- Minimum touch target: 44×44px
- Ensure sufficient color contrast

## Customization

### Custom Colors

```html
<button class="bg-gradient-to-r from-[#your-color] to-[#your-color]">
```

### Custom Shadow Colors

```html
<button class="shadow-lg shadow-[color]/[opacity]">
```

## Related

- [Glass Button](../glass-button/) - Frosted glass effect
- [Animated Button](../animated-button/) - Hover animations
- [Icon Button](../icon-button/) - Icon + text combinations