Argila em relevo

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

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

Um botão neumórfico em relevo sobre uma superfície #e0e5ec: mesmo fundo #e0e5ec, texto ardósia #3d4a5c em 14px semibold, raio de 14px, padding de 14px por 28px, sem borda, com uma sombra escura 6px 6px 12px #b8bec7 no canto inferior direito e um realce branco -6px -6px 12px no superior esquerdo. No hover as duas sombras crescem para 8px/16px; no active elas invertem para inset 4px 4px 8px, como se estivesse afundado. Outline de foco de 2px ardósia.

Argila em relevo

Mesma prateleira