Design for AI

Clay peach

Clay peach: a CSS button. Copy the rules, or the prompt that rebuilds it.

claymorphismroundedsoftpastelwarm

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
}
HTML
<button class="btn-132">Order</button>
Prompt

A peach clay button #fdba74 with dark brown #7c2d12 15px bold text, 20px radius, 15px by 30px padding. Puffiness comes from a dark inset shadow bottom-right (#f59e4d) and a light inset shadow top-left (#ffd9b0), 10px blur, plus a peach drop shadow (6px 6px 16px). Hover lightens to #fdc58a and lifts 2px; active scales 0.97 and flattens the insets. Focus 3px brown outline.

Same shelf