Design for AI

Bolha de argila

Bolha de argila: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

claymorphismpillsoftinset-shadowpastel

CSS
.btn-131 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #7c9cff;
  border: 0;
  border-radius: 26px;
  padding: 16px 32px;
  cursor: pointer;
  box-shadow: inset -6px -6px 12px #5d7de6,inset 6px 6px 12px #a3baff,8px 8px 20px #7c9cff55;
  transition: transform .2s,box-shadow .2s
}
.btn-131:hover {
  transform: translateY(-2px);
  box-shadow: inset -6px -6px 12px #5d7de6,inset 6px 6px 12px #a3baff,10px 12px 26px #7c9cff66
}
.btn-131:focus-visible {
  outline: 3px solid #5d7de6;
  outline-offset: 3px
}
.btn-131:active {
  transform: translateY(1px) scale(.98);
  box-shadow: inset -3px -3px 6px #5d7de6,inset 3px 3px 6px #a3baff,4px 4px 10px #7c9cff55
}
HTML
<button class="btn-131">Bounce</button>
Prompt

Um botão claymorphism: lilás #7c9cff com um visual fofo vindo de duas sombras inset (escura #5d7de6 no inferior direito, clara #a3baff no superior esquerdo, blur de 12px, offset de 6px) e uma sombra externa colorida suave (8px 8px 20px), raio de 26px, texto branco de 15px bold, padding de 16px por 32px. No hover sobe 2px com uma sombra maior; no active se achata para 0.98 com insets mais rasos. Foco com outline azul escuro de 3px.

Mesma prateleira