Design for AI

Burbuja de arcilla

Burbuja de arcilla: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de claymorphism: lavanda #7c9cff con aspecto mullido gracias a dos sombras inset (oscura #5d7de6 abajo a la derecha, clara #a3baff arriba a la izquierda, desenfoque de 12px, offset de 6px) y una sombra de color suave (8px 8px 20px), radio de 26px, texto blanco de 15px en negrita, padding de 16px por 32px. Al pasar el cursor se eleva 2px con una sombra mayor; en active se aplasta a 0.98 con insets menos profundos. Foco con outline de 3px azul más oscuro.

Misma estantería