Soft Pille Akzent

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

CSS

.btn-042 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #0d9488;
  background: linear-gradient(145deg,#f7f9fc,#d8dde6);
  border: 0;
  border-radius: 999px;
  padding: 13px 28px;
  cursor: pointer;
  box-shadow: 5px 5px 12px #c4c9d2,-5px -5px 12px #fff;
  transition: box-shadow .15s,background .15s
}
.btn-042:hover {
  background: linear-gradient(145deg,#d8dde6,#f7f9fc)
}
.btn-042:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 3px
}
.btn-042:active {
  box-shadow: inset 3px 3px 8px #c4c9d2,inset -3px -3px 8px #fff;
  background: #eef1f6
}

HTML

<div style="background:#eef1f6;padding:28px"><button class="btn-042">Confirm</button></div>

Prompt

Eine neumorphe Pille auf einer #eef1f6 Fläche: 145deg Füllung von #f7f9fc nach #d8dde6, Teal-Text #0d9488 in 14px semibold, voll abgerundet, 13px mal 28px Padding, Schatten 5px 5px 12px #c4c9d2 und -5px -5px 12px Weiß. Hover kehrt die Verlaufsrichtung um; active flacht auf #eef1f6 mit 3px Inset-Schatten ab. Fokus-Outline 2px Teal.

Soft Pille Akzent

Gleiches Regal