Neumorphism 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

<!-- Neumorphism Bordered Button Styles -->
<style>
  .neu-bordered {
    background: linear-gradient(145deg, #f0f4f8, #d1d9e6);
    box-shadow: 6px 6px 12px #b8bec5, -6px -6px 12px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
  .neu-bordered:hover {
    box-shadow: 3px 3px 6px #b8bec5, -3px -3px 6px #ffffff;
  }
</style>

<!-- Neumorphism Bordered Button - Blue -->
<button class="px-8 py-3 neu-bordered text-blue-600 font-semibold rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all">
  Bordered Blue
</button>

<!-- Neumorphism Bordered Button - Purple -->
<button class="px-8 py-3 neu-bordered text-purple-600 font-semibold rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all">
  Bordered Purple
</button>

<!-- Neumorphism Bordered Button - Pill -->
<button class="px-8 py-3 neu-bordered text-gray-600 font-semibold rounded-full focus:outline-none focus:ring-2 focus:ring-gray-400 transition-all">
  Bordered Pill
</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

# Neumorphism Button

Soft UI buttons with neumorphism (soft UI) shadow effects.

## Variants

| Variant | Description |
|---------|-------------|
| [Soft](./soft/) | Convex neumorphism with outer shadows |
| [Bordered](./bordered/) | Bordered neumorphism with gradient backgrounds |

## Quick Start

```html
<style>
  .neu-button {
    background: #e0e5ec;
    box-shadow: 8px 8px 16px #b8bec5, -8px -8px 16px #ffffff;
  }
  .neu-button:hover {
    box-shadow: 4px 4px 8px #b8bec5, -4px -4px 8px #ffffff;
  }
</style>

<button class="px-8 py-3 neu-button text-gray-600 font-semibold rounded-xl">
  Neumorphism
</button>
```

## Browser Support

Works in all modern browsers.

## Related

- [Glass Button](../glass-button/) - Glass morphism style
- [Basic Button](../basic-button/) - Core button styles