Suave afundado

Suave afundado: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

CSS

.btn-039 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #3d4a5c;
  background: #e0e5ec;
  border: 0;
  border-radius: 14px;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: inset 5px 5px 10px #b8bec7,inset -5px -5px 10px #fff;
  transition: box-shadow .15s,color .15s
}
.btn-039:hover {
  color: #1f2937
}
.btn-039:focus-visible {
  outline: 2px solid #3d4a5c;
  outline-offset: 3px
}
.btn-039:active {
  box-shadow: inset 7px 7px 14px #b8bec7,inset -7px -7px 14px #fff
}

HTML

<div style="background:#e0e5ec;padding:28px"><button class="btn-039">Pause</button></div>

Prompt

Um botão neumórfico que fica afundado na superfície: fundo #e0e5ec com sombras internas (5px 5px 10px #b8bec7 e -5px -5px 10px branco), texto ardósia em 14px semibold, raio de 14px, padding de 14px por 28px. No hover o texto escurece; no active o inset aprofunda para 7px/14px. Outline de foco de 2px ardósia.

Suave afundado

Mesma prateleira