Chip suave

Chip suave: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um chip neumórfico pequeno sobre #e0e5ec: texto cinza #5b6778 em 12px medium, raio de 8px, padding de 9px por 14px, sombras rasas em relevo (3px 3px 6px #b8bec7, -3px -3px 6px branco). No hover o texto escurece; no active afunda com sombras inset de 2px e o texto vira índigo #4f46e5. Outline de foco de 2px cinza.

Chip suave

Mesma prateleira