Neumorphism Bordered 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
38

# Neumorphism Button Bordered

Neumorphic button with a bordered soft-UI treatment.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Neumorphism / soft-UI shadows
- Bordered variant
- Focus-visible states

## Usage

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

Copy from `code.html`.

## Customization

- Shadow values, surface color, border

## Accessibility

- Native `<button>`
- Ensure contrast remains acceptable on the soft surface

## Dependencies

- Tailwind CSS only

## File Structure

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