# Holographic foil (B 139)

Category: Buttons  
Tags: aurora, holographic, pill, animated, iridescent  
Page: https://designforai.dev/snippet/btn-139

## 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.

## HTML

```html
<button class="btn-139">Collect</button>
```

## CSS

```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)
}
```