Design for AI

Píldora suave con acento

Píldora suave con acento: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

neumorphicsoft-uipillaccent-text

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

Una píldora neumórfica sobre una superficie #eef1f6: relleno a 145deg de #f7f9fc a #d8dde6, texto teal #0d9488 de 14px semibold, totalmente redondeada, padding de 13px por 28px, sombras 5px 5px 12px #c4c9d2 y -5px -5px 12px blanco. Al pasar el cursor la dirección del degradado se invierte; en active se aplana a #eef1f6 con sombras inset de 3px. Outline de foco de 2px teal.

Misma estantería