Holografische Folie

Holografische Folie: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

auroraholographicpill animatediridescent

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

Eine Pille in holografischer Folie: ein 115 Grad Pastell-Regenbogen-Verlauf (Pink #fbcfe8, Lavendel #c7d2fe, Cyan #a5f3fc, Mint #bbf7d0, Gelb #fde68a) bei 300% Breite, sodass nur ein Ausschnitt sichtbar ist, tiefindigo #1e1b4b Text in Versalien 14px extra-bold mit 0.08em Tracking, 14px mal 30px Padding, eine 1px innere weiße Kante. Hover schiebt den Verlauf hindurch (800ms) wie beim Kippen einer Folienkarte und hebt 1px; active stoppt auf halbem Weg und rutscht 1px ab. Fokus 2px Indigo-Outline.

Holografische Folie

Gleiches Regal