Soft Toggle-Chip

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

CSS

.btn-043 {
  font: 500 12px/1 system-ui,sans-serif;
  color: #5b6778;
  background: #e0e5ec;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 6px #b8bec7,-3px -3px 6px #fff;
  transition: box-shadow .12s,color .12s
}
.btn-043:hover {
  color: #1f2937
}
.btn-043:focus-visible {
  outline: 2px solid #5b6778;
  outline-offset: 2px
}
.btn-043:active {
  box-shadow: inset 2px 2px 4px #b8bec7,inset -2px -2px 4px #fff;
  color: #4f46e5
}

HTML

<div style="background:#e0e5ec;padding:28px"><button class="btn-043">Wi-Fi</button></div>

Prompt

Ein kleiner neumorpher Chip auf #e0e5ec: 12px medium grauer Text #5b6778, 8px Radius, 9px mal 14px Padding, flache erhabene Schatten (3px 3px 6px #b8bec7, -3px -3px 6px Weiß). Hover dunkelt den Text; active drückt mit 2px Inset-Schatten ein und färbt den Text Indigo #4f46e5. Fokus-Outline 2px Grau.

Soft Toggle-Chip

Gleiches Regal