Arcilla modo oscuro

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

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

Un botón de claymorphism oscuro: pizarra #334155 con un brillo inset más claro arriba a la izquierda (#475569) y una sombra inset más oscura abajo a la derecha (#1e293b), desenfoque de 12px, más una sombra profunda (6px 6px 16px, #0f172a al 60%). Radio de 18px, texto #e2e8f0 de 15px semibold, padding de 15px por 28px. Al pasar el cursor el texto pasa a blanco y se eleva 2px; en active se escala 0.97 y aplana las sombras. Foco con outline gris de 2px. Para fondos oscuros.

Arcilla modo oscuro

Misma estantería