# Argila pêssego (B 132)

Categoria: Botões  
Tags: claymorphism, rounded, soft, pastel, warm  
Página: https://designforai.dev/pt/snippet/btn-132

## Prompt

Um botão de argila pêssego #fdba74 com texto marrom escuro #7c2d12 de 15px bold, raio de 20px, padding de 15px por 30px. O volume vem de uma sombra inset escura no inferior direito (#f59e4d) e uma sombra inset clara no superior esquerdo (#ffd9b0), blur de 10px, mais uma sombra externa pêssego (6px 6px 16px). No hover clareia para #fdc58a e sobe 2px; no active escala 0.97 e achata os insets. Foco com outline marrom de 3px.

## HTML

```html
<button class="btn-132">Order</button>
```

## CSS

```css
.btn-132 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #7c2d12;
  background: #fdba74;
  border: 0;
  border-radius: 20px;
  padding: 15px 30px;
  cursor: pointer;
  box-shadow: inset -5px -5px 10px #f59e4d,inset 5px 5px 10px #ffd9b0,6px 6px 16px #fdba7466;
  transition: transform .2s,box-shadow .2s,background .2s
}
.btn-132:hover {
  background: #fdc58a;
  transform: translateY(-2px)
}
.btn-132:focus-visible {
  outline: 3px solid #7c2d12;
  outline-offset: 3px
}
.btn-132:active {
  transform: scale(.97);
  box-shadow: inset -2px -2px 5px #f59e4d,inset 2px 2px 5px #ffd9b0,2px 2px 6px #fdba7466
}
```