Soft gedrückt

Soft gedrückt: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

CSS

.btn-039 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #3d4a5c;
  background: #e0e5ec;
  border: 0;
  border-radius: 14px;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: inset 5px 5px 10px #b8bec7,inset -5px -5px 10px #fff;
  transition: box-shadow .15s,color .15s
}
.btn-039:hover {
  color: #1f2937
}
.btn-039:focus-visible {
  outline: 2px solid #3d4a5c;
  outline-offset: 3px
}
.btn-039:active {
  box-shadow: inset 7px 7px 14px #b8bec7,inset -7px -7px 14px #fff
}

HTML

<div style="background:#e0e5ec;padding:28px"><button class="btn-039">Pause</button></div>

Prompt

Ein neumorpher Button, der in die Fläche eingesunken sitzt: #e0e5ec Hintergrund mit Inset-Schatten (5px 5px 10px #b8bec7 und -5px -5px 10px Weiß), Schiefer-Text in 14px semibold, 14px Radius, 14px mal 28px Padding. Hover dunkelt den Text; active vertieft das Inset auf 7px/14px. Fokus-Outline 2px Schiefer.

Soft gedrückt

Gleiches Regal