Built for landing pages, dashboards, design portfolios, SaaS products, and client sites where you want CTAs that feel high‑end without custom code.

<iframe src="https://framer.website" width="100%" height="100%"></iframe>

Designers - Quickly add polished, animated glass buttons to prototypes and production designs.

SaaS Founders - Ship beautiful, conversion‑focused CTAs for pricing pages, hero sections, and onboarding flows.

Agencies - Reuse a single, flexible button across client projects with easy visual tuning.

Solo Devs - Get a pro‑level animated button without wrestling CSS, keyframes, and edge cases.

Drop Glass Button onto your canvas.

Set a Label (e.g. “Start Free Trial”).

Optionally add an Icon.

Connect a Link if it should navigate (toggle Open in New Tab as needed).

You now have a production‑ready glass button with:

Smooth hover & click animations

Clean rim lighting and glow

Accessible focus states

Add a playful, elastic motion on hover and click.

Jiggle Mode: on / off

Jiggle Intensity: Light | Medium | Heavy

Use:

Light - subtle motion for serious SaaS UIs and dashboards.

Medium/Heavy - eye‑catching CTAs on marketing pages, portfolios, and launch sites.

Control how “alive” the button feels:

Hover Scale - size on hover (default: 1.15)

Click Scale - size on press (default: 0.92)

Presets by use case:

Choose the “thickness” of the glass:

Flat - minimal shadow, subtle gloss. Great for dense UIs and toolbars.

Standard - balanced depth and glow. Ideal default for CTAs.

Inflated - strong 3D feel with pronounced rim and inner shadows. Perfect for hero sections and key actions.

Fine‑tune the look:

Background Tint - base glass color/opacity

Hover Background Tint - tint on hover/active

Blur Intensity - frosted strength (higher = more blurred background)

Corner Radius - roundness of the button

Tips:

Dark backgrounds: use light, semi‑transparent tints (e.g. rgba(255,255,255,0.06-0.12)).

Light backgrounds: use darker tints (e.g. rgba(0,0,0,0.06-0.12)) and ensure text contrast.

Make the glass edge pop:

Border Width - thickness of the rim

Top Border Color - highlight on the top edge

Bottom Border Color - shadow on the bottom edge

Base Rotation - starting angle of the rim glow

Hover Rotation Delta - extra rotation on hover

Suggestions:

Subtle SaaS look:

Bold marketing look:

Label - button text

Typography - font, size, weight, etc.

Text Color / Hover Text Color

Recommendations:

Use a clean, modern sans (Inter, SF Pro, etc.).

Size: 16-20px for primary CTAs; 14-16px for secondary/toolbar buttons.

Keep text bold enough to read over the glass (weight 700-800 usually works well).

The button fills its parent container.

To control size:

Wrap it in a Frame and set the Frame’s width/height.

Or place it inside a Stack, Grid, or auto‑layout.

Adjust internal spacing with:

Increase padding for big hero CTAs; reduce for compact nav bars and toolbars.

Keyboard‑navigable with a clear focus ring.

Works as a link when Link is set; otherwise focusable via tabIndex.

Focus styles are built in; you can customize them in the component if your design system requires specific colors or widths.

Depth: Standard

Jiggle: off or Light

Hover Scale: 1.08

Click Scale: 0.94

Blur: 28-32

Font: Inter, 18px, weight 800

Use on: pricing cards, hero “Start Free Trial” buttons

Depth: Inflated

Jiggle: Medium or Heavy

Hover Scale: 1.16

Click Scale: 0.91

Strong rim glow with noticeable hover rotation

Use on: portfolio hero, case study CTAs, “Let’s Work Together” buttons

Depth: Flat

Jiggle: off

Hover Scale: 1.06

Click Scale: 0.96

Small padding, 14-16px text

Use on: app toolbars, settings pages, secondary actions

One component, many styles - from minimal SaaS UI to bold marketing buttons.

No code tweaks needed - everything is exposed via controls.

Consistent across projects - reuse the same button for all your clients, products, and portfolios.

Feels custom - animations and glass effects that usually require hand‑rolled CSS.