Design for AIHolographic foil
Holographic foil: a CSS button. Copy the rules, or the prompt that rebuilds it.
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
A holographic-foil pill: a 115 degree pastel rainbow gradient (pink #fbcfe8, lavender #c7d2fe, cyan #a5f3fc, mint #bbf7d0, yellow #fde68a) at 300% width so only part shows, dark indigo #1e1b4b uppercase 14px extra-bold text with 0.08em tracking, 14px by 30px padding, a 1px inner white edge. Hover slides the gradient across (800ms) like tilting a foil card and lifts 1px; active stops midway and drops 1px. Focus 2px indigo outline.