Suave modo escuro

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

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

Um botão neumórfico escuro sobre uma superfície #1f2430: mesmo fundo, texto claro #c7d0e0 em 14px semibold, raio de 12px, padding de 14px por 28px, em relevo com uma sombra mais escura 6px 6px 12px #151920 e uma mais clara -6px -6px 12px #292f40. No hover o texto fica branco; no active inverte para sombras inset de 4px. Outline de foco de 2px claro.

Suave modo escuro

Mesma prateleira