# Soft pill accent (B 042)

Category: Buttons  
Tags: neumorphic, soft-ui, pill, accent-text  
Page: https://designforai.dev/snippet/btn-042

## Prompt

A neumorphic pill on a #eef1f6 surface: 145deg fill from #f7f9fc to #d8dde6, teal text #0d9488 at 14px semibold, fully rounded, 13px by 28px padding, shadows 5px 5px 12px #c4c9d2 and -5px -5px 12px white. Hover reverses the gradient direction; active flattens to #eef1f6 with inset 3px shadows. Focus outline 2px teal.

## HTML

```html
<div style="background:#eef1f6;padding:28px"><button class="btn-042">Confirm</button></div>
```

## CSS

```css
.btn-042 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #0d9488;
  background: linear-gradient(145deg,#f7f9fc,#d8dde6);
  border: 0;
  border-radius: 999px;
  padding: 13px 28px;
  cursor: pointer;
  box-shadow: 5px 5px 12px #c4c9d2,-5px -5px 12px #fff;
  transition: box-shadow .15s,background .15s
}
.btn-042:hover {
  background: linear-gradient(145deg,#d8dde6,#f7f9fc)
}
.btn-042:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 3px
}
.btn-042:active {
  box-shadow: inset 3px 3px 8px #c4c9d2,inset -3px -3px 8px #fff;
  background: #eef1f6
}
```