Arcilla en relieve

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

CSS

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

HTML

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

Prompt

Un botón neumórfico en relieve sobre una superficie #e0e5ec: mismo fondo #e0e5ec, texto pizarra #3d4a5c de 14px semibold, radio de 14px, padding de 14px por 28px, sin borde, con una sombra oscura 6px 6px 12px #b8bec7 hacia abajo a la derecha y un brillo blanco -6px -6px 12px hacia arriba a la izquierda. Al pasar el cursor ambas sombras crecen a 8px/16px; en active se invierten a inset 4px 4px 8px para que parezca hundido. Outline de foco de 2px pizarra.

Arcilla en relieve

Misma estantería