# Clay bubble (B 131)

Category: Buttons  
Tags: claymorphism, pill, soft, inset-shadow, pastel  
Page: https://designforai.dev/snippet/btn-131

## Prompt

A claymorphism button: periwinkle #7c9cff with a puffy look from two inset shadows (dark #5d7de6 bottom-right, light #a3baff top-left, 12px blur, 6px offset) and a soft coloured drop shadow (8px 8px 20px), 26px radius, white 15px bold text, 16px by 32px padding. Hover lifts 2px with a larger shadow; active squishes to 0.98 with shallower insets. Focus 3px darker-blue outline.

## HTML

```html
<button class="btn-131">Bounce</button>
```

## CSS

```css
.btn-131 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #7c9cff;
  border: 0;
  border-radius: 26px;
  padding: 16px 32px;
  cursor: pointer;
  box-shadow: inset -6px -6px 12px #5d7de6,inset 6px 6px 12px #a3baff,8px 8px 20px #7c9cff55;
  transition: transform .2s,box-shadow .2s
}
.btn-131:hover {
  transform: translateY(-2px);
  box-shadow: inset -6px -6px 12px #5d7de6,inset 6px 6px 12px #a3baff,10px 12px 26px #7c9cff66
}
.btn-131:focus-visible {
  outline: 3px solid #5d7de6;
  outline-offset: 3px
}
.btn-131:active {
  transform: translateY(1px) scale(.98);
  box-shadow: inset -3px -3px 6px #5d7de6,inset 3px 3px 6px #a3baff,4px 4px 10px #7c9cff55
}
```