Design for AI

Chip suave conmutable

Chip suave conmutable: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

neumorphicsoft-uismallchip

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

Un chip neumórfico pequeño sobre #e0e5ec: texto gris #5b6778 de 12px de peso medio, radio de 8px, padding de 9px por 14px, sombras de relieve poco profundas (3px 3px 6px #b8bec7, -3px -3px 6px blanco). Al pasar el cursor el texto se oscurece; en active se hunde con sombras inset de 2px y el texto se vuelve índigo #4f46e5. Outline de foco de 2px gris.

Misma estantería