Soft erhaben

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

CSS

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

HTML

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

Prompt

Ein neumorpher erhabener Button auf einer #e0e5ec Fläche: gleicher #e0e5ec Hintergrund, Schiefer-Text #3d4a5c in 14px semibold, 14px Radius, 14px mal 28px Padding, kein Rahmen, mit einem dunklen Schatten 6px 6px 12px #b8bec7 nach unten rechts und einem weißen Glanz -6px -6px 12px nach oben links. Hover vergrößert beide Schatten auf 8px/16px; active invertiert sie auf inset 4px 4px 8px, sodass er eingedrückt wirkt. Fokus-Outline 2px Schiefer.

Soft erhaben

Gleiches Regal