Glass 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

# Glass Button

Glass morphism buttons with backdrop blur effects.

## Variants

| Variant | Description |
|---------|-------------|
| [Soft](./soft/) | Light glass buttons with subtle blur |
| [Icon](./icon/) | Glass icon buttons |

## Quick Start

```html
<style>
  .glass-button {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
</style>

<button class="px-6 py-2.5 glass-button text-gray-700 font-medium rounded-lg hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white/50 transition-all">
  Glass Button
</button>
```

## Browser Support

- `backdrop-filter` requires webkit prefix for Safari
- Fallback: semi-transparent background without blur

## Related

- [Basic Button](../basic-button/) - Core button styles
- [Neumorphism Button](../neumorphism-button/) - Soft UI style