Minimal Button

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

<!-- Minimal Pill Border Button -->
<button class="px-5 py-2 text-blue-600 font-medium border border-blue-600 rounded-full hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
  Pill Border
</button>

<!-- Minimal Outline Border Button -->
<button class="px-5 py-2 text-gray-700 font-medium border border-gray-300 rounded hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 transition-colors">
  Outline Border
</button>

<!-- Minimal Bold Border Button -->
<button class="px-5 py-2 text-green-600 font-medium border-2 border-green-500 hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-400 transition-colors">
  Bold Border
</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

# Minimal Button

Minimal button styles with subtle designs.

## Variants

| Variant | Description |
|---------|-------------|
| [Underline](./underline/) | Underline button styles |
| [Border](./border/) | Border button styles |

## Quick Start

```html
<!-- Underline Button -->
<button class="text-blue-600 font-medium hover:text-blue-700 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500">
  Underline Button
</button>

<!-- Animated Underline -->
<button class="text-purple-600 font-medium relative after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-purple-600 hover:after:w-full after:transition-all">
  Animated Underline
</button>

<!-- Pill Border -->
<button class="px-5 py-2 text-blue-600 border border-blue-600 rounded-full hover:bg-blue-50">
  Pill Border
</button>
```

## Related

- [Basic Button](../basic-button/) - Core button styles
- [Ghost Button](../ghost-button/) - Ghost button styles