Minimal Underline Button

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

<!-- Minimal 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>

<!-- Minimal Border Underline Button -->
<button class="text-gray-700 font-medium hover:text-gray-900 border-b-2 border-transparent hover:border-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 pb-1">
  Border Underline
</button>

<!-- Minimal Animated Underline Button -->
<button class="text-purple-600 font-medium hover:text-purple-700 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 focus:outline-none focus:ring-2 focus:ring-purple-500">
  Animated Underline
</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

# Minimal Button Underline

Minimal text button with underline emphasis.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Underline treatment
- Focus-visible states

## Usage

```bash
npx devsnips add Tailwind/Components/Buttons/minimal-button/underline
```

Copy from `code.html`.

## Customization

- Underline style, text color, hover state

## Accessibility

- Native `<button>` (or link if navigation)

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`