---
title: "Glassdrop Buttons — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Liubomyr Yurchyshyn · Buttons. Liquid Glass · 5 buttons for Frame"
canonical: "https://framer.elliotli.dev/component/glassdrop-buttons"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Glassdrop Buttons

# Glassdrop Buttons

Liquid Glass · 5 buttons for Frame

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

![Glassdrop Buttons preview image 1](https://framer.elliotli.dev/og/component/glassdrop-buttons/1b0bab393917b044/1600x1200.jpg)

## Summary

Liquid Glass · 5 buttons for Frame

## Description

✦ **What's included**

5 Liquid Glass button variants inspired by Apple, Linear, and Raycast. Each features smooth hover and press animations with glassmorphism effects and full customization via Framer Variables.

🧩 **Variants**

-   **Primary** — main CTA with indigo glow and glass fill
    
-   **Secondary** — subtle ghost button that comes alive on hover
    
-   **Destructive** — warm red glass for delete and cancel actions
    
-   **Icon Only** — compact circular glass button for toolbars
    
-   **Disabled** — muted state with reduced opacity
    

✦ **Animations**

Hover activates a subtle magnetic pull toward the cursor with intensified glow. Press snaps back fast for a physical, tactile feel. Timing: 200ms ease for hover, 100ms for press.

🎨 **Customization**

Every button exposes these properties directly in Framer:

-   **Button Text** — custom label
    
-   **Button Accent Color** — changes fill
    
-   **Button Padding** — adjust spacing
    
-   **Button Font Size** — scales the label
    
-   **Button Icon Visible** — show or hide the icon
    
-   **Icon Size** — independent icon sizing
    
-   **Material Icon Name** — any icon name from Material Symbols
    

🔍 **Finding icons**

Browse thousands of icons at [fonts.google.com/icons](http://fonts.google.com/icons) — search for what you need, click on it and copy the name. Example icon names: `arrow_forward`, `star`, `download`, `mail`, `play_arrow`, `delete`, `settings`.

🚀 **How to use**

1.  Purchase and open the Framer remix link
    
2.  Copy the component to your project
    
3.  Customize accent color and icon via Variables
    
4.  Drop into any frame and connect interactions
    

⚙ **Requirements**

Framer — any plan. No plugins needed.

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

-   All · #1786

## Details

- **Author**: Liubomyr Yurchyshyn
- **Price**: $9.00
- **Published**: 2026-06-18
- **Updated**: 2026-07-13
- **Added**: 2026-06-18
- **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