Soft toggle chip

Soft toggle chip: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A small neumorphic chip on #e0e5ec: 12px medium grey text #5b6778, 8px radius, 9px by 14px padding, shallow raised shadows (3px 3px 6px #b8bec7, -3px -3px 6px white). Hover darkens the text; active presses in with inset 2px shadows and turns the text indigo #4f46e5. Focus outline 2px grey.

Soft toggle chip

Same shelf