---
title: "Liquid Chrome Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Saadat Ali · Buttons. Animated chrome button with glass center"
canonical: "https://framer.elliotli.dev/component/liquid-chrome-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Liquid Chrome Button

# Liquid Chrome Button

Animated chrome button with glass center

[View on Framer](https://framer.com/marketplace/components/liquid-chrome-button/?via=elliot-li)

![Liquid Chrome Button preview image 1](https://framer.elliotli.dev/og/component/liquid-chrome-button/ddc65ab4432280cd/1600x1200.jpg)

## Summary

Animated chrome button with glass center

## Description

\-----------------------------------------------------------------------------------------------

## Add More Premium Components To Your Projects:

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-g094t2v1-8wrj2R4JsfS8dz3uRkUmPxMk3a0JAx)](https://marketplace.framer.com/@saadat-ali-designsbysadat/)

**Key Features**

-   WebGL-powered liquid chrome shader animation
    
-   Smooth, organic motion with adjustable speed
    
-   Frosted glass inner button with depth and reflections
    
-   Circular design with customizable size and border thickness
    
-   Built-in hover and tap interactions (scale + spring physics)
    
-   Optional custom SVG icon support (auto-masked)
    
-   Fallback icon set included (Folder, Lightning, Cursor)
    
-   Link-enabled (acts as button or anchor)
    

**Customization Options**

-   Size (40–300px)
    
-   Border width
    
-   Animation speed
    
-   Glass opacity
    
-   Icon (default or custom SVG)
    
-   Click link
    

**Use Cases**

-   Hero CTAs
    
-   Portfolio interactions
    
-   Product highlights
    
-   Navigation buttons
    
-   Experimental / high-end UI sections
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1907

## Details

- **Author**: Saadat Ali
- **Published**: 2026-04-02
- **Updated**: 2026-06-15
- **Added**: 2026-03-25
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything