Neumorphism Soft 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

<!-- Neumorphism Soft Button Styles -->
<style>
  .neu-soft {
    background: #e0e5ec;
    box-shadow: 8px 8px 16px #b8bec5, -8px -8px 16px #ffffff;
  }
  .neu-soft:hover {
    box-shadow: 4px 4px 8px #b8bec5, -4px -4px 8px #ffffff;
  }
</style>

<!-- Neumorphism Soft Button - Default -->
<button class="px-8 py-3 neu-soft text-gray-600 font-semibold rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-400 transition-all">
  Neumorphism
</button>

<!-- Neumorphism Soft Button - Pill -->
<button class="px-8 py-3 neu-soft text-gray-600 font-semibold rounded-full focus:outline-none focus:ring-2 focus:ring-gray-400 transition-all">
  Neumorphism Pill
</button>

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

# Neumorphism Button Soft

Soft neumorphic button.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Soft-UI / neumorphic shadows
- Focus-visible states

## Usage

```bash
npx devsnips add Tailwind/Components/Buttons/neumorphism-button/soft
```

Copy from `code.html`.

## Customization

- Shadow values and surface color

## Accessibility

- Native `<button>`

## Dependencies

- Tailwind CSS only

## File Structure

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