Design for AI

Pílula suave acentuada

Pílula suave acentuada: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Uma pílula neumórfica sobre uma superfície #eef1f6: preenchimento a 145deg de #f7f9fc a #d8dde6, texto teal #0d9488 em 14px semibold, totalmente arredondada, padding de 13px por 28px, sombras 5px 5px 12px #c4c9d2 e -5px -5px 12px branco. No hover a direção do gradiente inverte; no active achata para #eef1f6 com sombras inset de 3px. Outline de foco de 2px teal.

Mesma prateleira