Argila modo escuro

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

CSS

.btn-135 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #e2e8f0;
  background: #334155;
  border: 0;
  border-radius: 18px;
  padding: 15px 28px;
  cursor: pointer;
  box-shadow: inset -5px -5px 12px #1e293b,inset 5px 5px 12px #475569,6px 6px 16px #0f172a99;
  transition: transform .2s,box-shadow .2s,color .2s
}
.btn-135:hover {
  color: #fff;
  transform: translateY(-2px)
}
.btn-135:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 3px
}
.btn-135:active {
  transform: scale(.97);
  box-shadow: inset -2px -2px 6px #1e293b,inset 2px 2px 6px #475569,2px 2px 6px #0f172a99
}

HTML

<button class="btn-135">Settings</button>

Prompt

Um botão claymorphism escuro: ardósia #334155 com um realce inset mais claro no superior esquerdo (#475569) e uma sombra inset mais escura no inferior direito (#1e293b), blur de 12px, mais uma sombra externa profunda (6px 6px 16px, #0f172a a 60%). Raio de 18px, texto #e2e8f0 de 15px semibold, padding de 15px por 28px. No hover o texto fica branco e o botão sobe 2px; no active escala 0.97 e achata as sombras. Foco com outline cinza de 2px. Para fundos escuros.

Argila modo escuro

Mesma prateleira