Holographic Foil
Iridescent cyan→magenta sheen with a ragged sticker edge. Hover shifts the spectrum across the surface.
Holographic Foil the 21st of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="btn-holo"> <span class="btn-holo-text">Mint NFT</span> </button>
.btn-holo {
position: relative;
padding: 13px 28px;
border: 2px solid #fff;
border-radius: 6px;
background:
linear-gradient(115deg,
#00d4ff 0%,
#ff3d8c 30%,
#3eff7f 55%,
#fef34c 75%,
#00d4ff 100%);
background-size: 240% 100%;
background-position: 0% 50%;
color: #1a0033;
font-family: ui-monospace, monospace;
font-size: 13px; font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
box-shadow:
0 4px 18px rgba(0,212,255,0.35),
0 4px 18px rgba(255,61,140,0.35),
inset 0 0 0 1px rgba(255,255,255,0.4);
transition: background-position 0.5s cubic-bezier(.3,1,.3,1), transform 0.18s;
}
.btn-holo-text {
background: rgba(255,255,255,0.7);
padding: 4px 10px;
border-radius: 3px;
}
.btn-holo:hover {
background-position: 100% 50%;
transform: translateY(-2px) scale(1.02);
}