Parallel Studio
See Deltaproof
Back to blog
5 min readParallel Studio

Liquid Metal Button Effect for Webflow, Framer and Any Site

liquid metal buttonchrome buttonwebflowframerwebglcss button effect

A chrome or liquid metal button is one of those effects that looks simple in a screenshot and is surprisingly fiddly to build. A plain CSS gradient gets you a flat, painted-on "metallic" look. The convincing version has reflections that move with the pointer, a surface that reacts when you hover, and a press that feels physical. That means WebGL.

The catch is what happens to the button underneath. Many metal-button demos replace the button with a canvas, which breaks keyboard focus, form submits, link behavior, and screen readers. This post covers what is worth caring about, and how to add the effect to real <button> and <a> elements in Webflow, Framer, React, or plain HTML.

CSS metallic vs. WebGL metallic

CSS-only metallic buttons use stacked gradients and inset shadows. They are cheap, work everywhere, and are fine for a subtle look. What they can't do is reflect a moving environment, melt under the cursor, or ripple from the point you pressed.

WebGL can render a reflective surface that responds to the pointer. The trade-off is cost: one WebGL context per button gets expensive fast. A pricing page with 30 buttons should not create 30 contexts.

Whatever you choose, check three things:

  • The element is still a button. Tab, Enter, Space, forms, links, and disabled states should behave exactly as before.
  • The label is readable. Bright chrome reflections behind white text is a classic accessibility failure.
  • There is a fallback. Reduce Motion and no-WebGL visitors should still get a decent-looking button.

The approach: the metal is a layer inside your button

Liquid Metal Buttons draws the metal in a layer inside your own <button> or <a>, behind the label. The element stays yours. Take the tag away and it is exactly what it was.

How it handles the three concerns above, per the product docs:

  • Behind the label, the metal is kept in a brightness range that gives at least 4.5:1 contrast with the label color. If you change the label color, the metal adapts.
  • Every button on a page shares one WebGL context, so 30 buttons cost about what one does. Offscreen buttons don't render and idle ones skip frames.
  • With Reduce Motion on, visitors see still metal. Without WebGL there is a CSS version of the same metal.

The script is 14.7 KB gzipped with no dependencies.

Plain HTML

Upload liquid-metal-buttons.min.js from the download, add the script once, and wrap a button or link in <pf-liquid-metal>:

<script src="/liquid-metal-buttons.min.js" defer></script>

<pf-liquid-metal preset="chrome" variant="pill">
  <a href="/start">Get started</a>
</pf-liquid-metal>

There are 12 presets: chrome, gold, mercury, holographic, gunmetal, rose-gold, black-chrome, titanium, copper, oil-slick, ice, and neon-edge. Mercury is the most liquid; hover it and the metal melts under the pointer. Variants are button, pill, icon, badge, and card.

Webflow

  1. Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code.
  2. Select a Button, open Element settings → Custom attributes, and add data-liquid-metal with the value chrome (or any preset). Add data-lm-variant = pill for a pill shape.
  3. Publish. Custom code runs on the published site, not in the Designer.

To skin every button that shares a class, drop this into a Code Embed:

<pf-liquid-metal attach=".cta-button" preset="gold" variant="pill"></pf-liquid-metal>

Custom code needs a paid Webflow site plan.

Framer

  1. In your project, go to Assets → Code → + → New component file and name it LiquidMetal.
  2. Replace the file's contents with framer/LiquidMetal.tsx from the download and save.
  3. Drag it onto the canvas, set the label, font, link or tap interaction, and pick a preset.

React and Next.js

Copy react/LiquidMetal.tsx into your project (React 18+). It renders a real <button> or <a>, and every prop you'd normally pass goes to that element:

import LiquidMetal from "./LiquidMetal"

<LiquidMetal preset="chrome" variant="pill" onClick={start}>
  Get started
</LiquidMetal>
<LiquidMetal as="a" href="/pricing" preset="gold">Pricing</LiquidMetal>

Customizing

Presets are a starting point. The same settings work as HTML attributes, data attributes, React props, or Framer panel controls:

  • label-color: any CSS color; the metal behind it adapts.
  • fill: metal, solid, or clear inside the rim.
  • follow: reflections follow the pointer anywhere on the page (page), only while hovered (hover), or stay put (none).

When not to use it

  • Every button on the page. Metal draws the eye; use it for the one or two actions that matter and keep the rest plain.

See it in context

Liquid Metal Buttons is part of the Parallel Studio set of web effects on /effects. The Liquid Metal Buttons page has all 12 presets running live, so you can check how a label reads on each one before you decide.

Pricing

Liquid Metal Buttons is a $12 one-time purchase for a single project, with free updates to v1.x. If you'd rather have the whole catalog, the All-Access Pass is $49.

A good metal button is one that still behaves like a button. Start with a single call to action, check it with the keyboard, and look at the label contrast on your real page.