---
title: "Shader Glassy Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. A Glassmorphism CTA with shader"
canonical: "https://framer.elliotli.dev/component/shader-glassy-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Shader Glassy Button

# Shader Glassy Button

A Glassmorphism CTA with shader

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

![Shader Glassy Button preview image 1](https://framer.elliotli.dev/og/component/shader-glassy-button/f88a3191855af8c6/1600x1200.jpg)

## Summary

A Glassmorphism CTA with shader

## Description

**About**

Shader Button is a premium CTA button powered by a live WebGL shader background. The outer ring renders a fluid, animated gradient using GLSL shifting colors and light in real time. The inner pill uses a dark frosted glass overlay with layered inset shadows, creating a depth and glow contrast that feels genuinely premium and distinct from a standard CSS button.

**What it does**

On hover, the shader background intensifies, the gradient shifts, the glow brightens, and the entire button feels alive. The animation is driven by a real-time WebGL shader, not a CSS gradient or image, so the motion is fluid, continuous, and impossible to replicate with standard Framer effects. The dark glassmorphism inner pill with inset shadow layers adds depth and contrast against the glowing outer ring.

**What you can customize**

Full control from the Framer panel: button text, text color, inner pill background color, inner shadow, shader noise intensity, shader brightness, shader saturation, shader base color, shader opacity, shader phase offset, and shader resolution. Everything is exposed as a property — no code needed to dial in the look.

**Great for (examples)**

Use it anywhere you want a button that feels genuinely next-level:

\* hero sections on dark or gradient backgrounds

\* AI and tech product landing pages

\* SaaS websites with a premium visual identity

\* portfolio and creative studio sites

\* product launch pages

\* waitlist and early access CTAs

\* pricing section highlights

\* Framer template previews

**Share your build**

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

**Need help?**

Questions or feedback? Reach me anytime: [karimsaif010@gmail.com](mailto:karimsaif010@gmail.com) or on [X @karimsaif0](https://x.com/karimsaif0).

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

-   All · #6145

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-01
- **Updated**: 2026-07-01
- **Added**: 2026-07-01
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow