Soft Dark Mode

Soft Dark Mode: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein dunkler neumorpher Button auf einer #1f2430 Fläche: gleicher Hintergrund, blasser Text #c7d0e0 in 14px semibold, 12px Radius, 14px mal 28px Padding, erhaben mit einem dunkleren Schatten 6px 6px 12px #151920 und einem helleren -6px -6px 12px #292f40. Hover macht den Text weiß; active invertiert auf 4px Inset-Schatten. Fokus-Outline 2px blass.

Soft Dark Mode

Gleiches Regal