Glass Icon 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

<!-- Glass Icon Button Styles -->
<style>
  .glass-icon {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  .glass-icon:hover {
    background: rgba(255, 255, 255, 0.4);
  }
</style>

<!-- Glass Icon Button - Heart -->
<button class="p-3 glass-icon text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 transition-all">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
  </svg>
</button>

<!-- Glass Icon Button - Bookmark -->
<button class="p-3 glass-icon text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 transition-all">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
  </svg>
</button>

<!-- Glass Icon Button - Share -->
<button class="p-3 glass-icon text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 transition-all">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
  </svg>
</button>

<!-- Glass Icon Button - Add (Pill) -->
<button class="p-3 glass-icon text-white rounded-full focus:outline-none focus:ring-2 focus:ring-white/50 transition-all">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
</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

# Glass Button Icon

Glassmorphism icon button.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Glass / frosted surface treatment
- Icon-only layout
- Focus-visible states

## Usage

```bash
npx devsnips add Tailwind/Components/Buttons/glass-button/icon
```

Copy from `code.html`.

## Customization

- Backdrop blur, border, background opacity
- Icon size and color

## Accessibility

- Provide an accessible name (`aria-label`) for icon-only buttons
- Native `<button>`

## Dependencies

- Tailwind CSS only

## File Structure

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