Filled 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

<!-- Soft Background Button - Blue -->
<button class="px-6 py-2.5 bg-blue-100 text-blue-700 font-medium rounded-lg hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
  Soft Blue
</button>

<!-- Soft Background Button - Green -->
<button class="px-6 py-2.5 bg-green-100 text-green-700 font-medium rounded-lg hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all">
  Soft Green
</button>

<!-- Soft Background Button - Red -->
<button class="px-6 py-2.5 bg-red-100 text-red-700 font-medium rounded-lg hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all">
  Soft Red
</button>

<!-- Soft Background Button - Amber -->
<button class="px-6 py-2.5 bg-amber-100 text-amber-700 font-medium rounded-lg hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 transition-all">
  Soft Amber
</button>

<!-- Soft Background Button - Purple -->
<button class="px-6 py-2.5 bg-purple-100 text-purple-700 font-medium rounded-lg hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all">
  Soft Purple
</button>

<!-- Soft Background Button - Pink -->
<button class="px-6 py-2.5 bg-pink-100 text-pink-700 font-medium rounded-lg hover:bg-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 transition-all">
  Soft Pink
</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

# Filled Button

Solid and soft background filled buttons in multiple colors and styles.

## Variants

| Variant | Description |
|---------|-------------|
| Primary | Solid color filled buttons |
| [Soft](./soft/) | Soft pastel background buttons |
| Sizes | All button sizes |

## Quick Start

```html
<!-- Solid Button -->
<button class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
  Solid Button
</button>

<!-- Soft Button -->
<button class="px-6 py-2.5 bg-blue-100 text-blue-700 font-medium rounded-lg hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
  Soft Button
</button>
```

## Accessibility

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

## Related

- [Basic Button](../basic-button/) - Core button styles
- [Ghost Button](../ghost-button/) - Transparent hover buttons
- [Outline Button](../outline-button/) - Bordered buttons