# Clay-Blase (B 131)

Kategorie: Buttons  
Tags: claymorphism, pill, soft, inset-shadow, pastel  
Seite: https://designforai.dev/de/snippet/btn-131

## Prompt

Ein Claymorphism-Button: Perlblau #7c9cff mit aufgeplustertem Look aus zwei Inset-Schatten (dunkel #5d7de6 unten rechts, hell #a3baff oben links, 12px Blur, 6px Versatz) und einem weichen farbigen Drop-Shadow (8px 8px 20px), 26px Radius, weißer Text 15px bold, 16px mal 32px Padding. Hover hebt 2px mit größerem Schatten; active quetscht auf 0.98 mit flacheren Insets. Fokus 3px dunkelblauere 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
}
```