HTML + CSSButtons
Holographic button
An iridescent foil button that tilts slightly and shifts hue as you move the pointer across it.
Settings
16px
1x
10°
Code
<button class="uv-hol"><span>View collection</span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
See all ButtonsWhere to use it
Holographic foil is the trading card and limited edition look, and this button recreates it in CSS: a rainbow border and a sheen layer move with the cursor while the button tilts in 3D. Use it for a drop, a collector's page, a music release or a premium plan that deserves a little theater.
Two colors set the hues of the foil, and the intensity slider controls how far it tilts, from flat to clearly three dimensional. On touch screens it rests in a neutral position, so the label always stays readable.