Suave modo oscuro

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

CSS

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

HTML

<div style="background:#1f2430;padding:28px"><button class="btn-041">Enable</button></div>

Prompt

Un botón neumórfico oscuro sobre una superficie #1f2430: mismo fondo, texto pálido #c7d0e0 de 14px semibold, radio de 12px, padding de 14px por 28px, en relieve con una sombra más oscura 6px 6px 12px #151920 y otra más clara -6px -6px 12px #292f40. Al pasar el cursor el texto se vuelve blanco; en active se invierte a sombras inset de 4px. Outline de foco de 2px pálido.

Suave modo oscuro

Misma estantería