HTML + CSSButtons
Liquid metal button
A polished chrome pill whose highlight slides across the surface as the pointer moves over it.
Settings
16px
1x
Code
<button class="uv-mtl"><span>Book a table</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
Chrome is back in product design, and this button brings it without images: stacked CSS gradients build the metal, and a small script moves the specular highlight with the cursor. It suits premium booking flows, watch or car brands, and any hero where one action has to feel solid and expensive.
Tint the metal with the main color to get steel, gold or rose gold, and keep the label short so it sits in the bright band. Pair it with flat, quiet buttons around it so the shine stays special.