---
title: "Liquid Glass Buttons — Free Framer component · Best of Framer"
description: "Free Framer component · by Matt · Buttons. Designed to catch the light"
canonical: "https://framer.elliotli.dev/component/liquid-glass-buttons"
---

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

# Liquid Glass Buttons

Designed to catch the light

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

![Liquid Glass Buttons preview image 1](https://framer.elliotli.dev/og/component/liquid-glass-buttons/9ff068e7853ad41f/1600x1200.jpg)

## Summary

Designed to catch the light

## Description

## About

Liquid Glass Button is a customizable Framer code component for transparent CTAs, navigation links and interface actions. Choose Clear, Frosted or Tinted glass with background blur, reflective edges and layered depth. On mouse hover, reflections follow the pointer with a subtle tilt and lift; pressing gently compresses the surface. Manually choose On Light or On Dark to match your background.

## What you can customize

Use Framer property controls to edit the label, link, typography, colors, padding, corners and icon placement. Choose a built-in icon or connect your own icon or layer. Adjust blur, glass depth, refraction, hover timing and pointer lighting. Includes On Tap events, disabled states, visible keyboard focus and reduced-motion support. No code editing needed.

Enhanced refraction is available in supported Chromium browsers outside iOS/iPadOS. Other browsers use CSS glass, with an opaque fallback when background blur is unavailable.

## Great for (examples)

Just a few ideas, use it anywhere a transparent action fits your design:

-   Hero CTAs over photography and textured backgrounds
    
-   SaaS landing pages, product demos and feature links
    
-   Portfolio navigation and project case-study links
    
-   Creative studios, agency sites and contact CTAs
    
-   App landing pages and download links
    
-   Hospitality, travel and destination booking links
    
-   Product launches, waitlists and promotional pages
    
-   Interface actions and connected Framer interactions
    

## Share your build

If you ship something cool with it, post it on X and tag me [@Matthias\_Oel](https://x.com/Matthias_Oel), or send it over. I’d love to see what you create.

## Need help?

Questions or feedback? Reach me anytime: [matthias@lmvision.de](mailto:matthias@lmvision.de) or on X [@Matthias\_Oel.](https://x.com/Matthias_Oel)

## Need a matching component?

Pair it with more glass and reflective details:

-   [Liquid Glass Nav Pro](https://framer.link/zLMlBIN)
    
-   [Liquid Metal Button+](https://framer.link/xjYIgmf)
    
-   [Explore all components →](https://framer.link/fsd2pgh)
    

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

-   All · #121

## Details

- **Author**: Matt
- **Published**: 2026-09-15
- **Updated**: 2026-10-30
- **Added**: 2026-09-15
- **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