Arcilla melocotón

Arcilla melocotón: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de arcilla melocotón #fdba74 con texto marrón oscuro #7c2d12 de 15px en negrita, radio de 20px, padding de 15px por 30px. El aspecto mullido viene de una sombra inset oscura abajo a la derecha (#f59e4d) y una sombra inset clara arriba a la izquierda (#ffd9b0), desenfoque de 10px, más una sombra melocotón (6px 6px 16px). Al pasar el cursor se aclara a #fdc58a y se eleva 2px; en active se escala 0.97 y aplana los insets. Foco con outline marrón de 3px.

Arcilla melocotón

Misma estantería