Design for AI

Folha holográfica

Folha holográfica: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Uma pílula em folha holográfica: um gradiente arco-íris pastel a 115 graus (rosa #fbcfe8, lavanda #c7d2fe, ciano #a5f3fc, menta #bbf7d0, amarelo #fde68a) com 300% de largura, para que só uma parte apareça, texto índigo escuro #1e1b4b em caixa alta de 14px extra-bold com tracking de 0.08em, padding de 14px por 30px, uma aresta interna branca de 1px. No hover o gradiente desliza (800ms) como ao inclinar um cartão holográfico e o botão sobe 1px; no active para no meio e desce 1px. Foco com outline índigo de 2px.

Mesma prateleira