Liquid Metal Buttons · chrome & liquid metal for any website · v1.0

1. 1

   Upload liquid-metal-buttons.min.js from the download to your site.

2. 2

   Add the script once, and wrap any button or link in a <pf-liquid-metal> tag. It stays your button.

3. 3

   Pick a preset and a variant, or set size, radius, label color and the rest as attributes.

<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>

1. 1

   Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code (or host the .js file and add its script tag there).

2. 2

   Select a Button → Element settings → Custom attributes: name data-liquid-metal, value chrome (or any preset). Add data-lm-variant = pill for a pill.

3. 3

   Publish. Custom code runs on the published site.

<!-- or skin every button with one class, from a Code Embed: -->
<pf-liquid-metal attach=".cta-button" preset="gold" variant="pill"></pf-liquid-metal>

Custom code needs a paid Webflow site plan.

1. 1

   Upload liquid-metal-buttons.min.js to your Media library or your theme, and copy its URL.

2. 2

   Add a Custom HTML block with the script and your button in a <pf-liquid-metal> tag.

<script src="https://your-site.com/wp-content/uploads/liquid-metal-buttons.min.js" defer></script>
<pf-liquid-metal preset="gold"><a href="/shop">Shop now</a></pf-liquid-metal>

On WordPress.com, you need a plan that allows custom code.

1. 1

   Online Store → Themes → Edit code → Assets: upload liquid-metal-buttons.min.js, and add its script tag before </body> in theme.liquid.

2. 2

   Skin the theme's own buttons by class. Add to cart keeps working: it's still the theme's button.

<script src="{{ 'liquid-metal-buttons.min.js' | asset_url }}" defer></script>
<pf-liquid-metal attach=".product-form__submit" preset="gold" variant="pill"></pf-liquid-metal>

1. 1

   Copy react/LiquidMetal.tsx into your project. It needs only React 18+.

2. 2

   Use it like a button: onClick, type, disabled and every other prop go to the real element.

import LiquidMetal from "./LiquidMetal"

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

Next.js: the server renders the real button with a CSS version of the metal; WebGL takes over in the browser.

1. 1

   In your Framer project, go to Assets → Code → + → New component file, and name it LiquidMetal.

2. 2

   Replace the file's contents with framer/LiquidMetal.tsx from the download, and save.

3. 3

   Drag LiquidMetal onto the canvas, set the label, font, link or tap interaction, and pick a preset.

On the Framer canvas you see a still frame, which keeps the editor fast. Set On Canvas to Live to see it move there.