Suave hundido

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

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

Un botón neumórfico que queda hundido en la superficie: fondo #e0e5ec con sombras inset (5px 5px 10px #b8bec7 y -5px -5px 10px blanco), texto pizarra de 14px semibold, radio de 14px, padding de 14px por 28px. Al pasar el cursor el texto se oscurece; en active el inset se profundiza a 7px/14px. Outline de foco de 2px pizarra.

Suave hundido

Misma estantería