Design for AI

Lámina holográfica

Lámina holográfica: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

auroraholographicpillanimatediridescent

CSS
.btn-139 {
  font: 800 14px/1 system-ui,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1e1b4b;
  background: linear-gradient(115deg,#fbcfe8,#c7d2fe 25%,#a5f3fc 50%,#bbf7d0 75%,#fde68a);
  background-size: 300% 100%;
  border: 0;
  border-radius: 999px;
  padding: 14px 30px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #fff8,0 4px 12px -4px #0004;
  transition: background-position .8s,transform .2s
}
.btn-139:hover {
  background-position: 100% 0;
  transform: translateY(-1px)
}
.btn-139:focus-visible {
  outline: 2px solid #1e1b4b;
  outline-offset: 3px
}
.btn-139:active {
  background-position: 50% 0;
  transform: translateY(1px)
}
HTML
<button class="btn-139">Collect</button>
Prompt

Una píldora de lámina holográfica: un degradado arcoíris pastel a 115 grados (rosa #fbcfe8, lavanda #c7d2fe, cian #a5f3fc, menta #bbf7d0, amarillo #fde68a) al 300% de ancho para que solo se vea una parte, texto índigo oscuro #1e1b4b en mayúsculas de 14px extra bold con 0.08em de tracking, padding de 14px por 30px, un canto interior blanco de 1px. Al pasar el cursor el degradado se desliza (800ms) como al inclinar una tarjeta holográfica y se eleva 1px; en active se detiene a medio camino y baja 1px. Foco con outline índigo de 2px.

Misma estantería