---
title: "Shatter Glass Button — Framer component · Best of Framer"
description: "$5.00 · Framer component · by JIetForce · Buttons. Shatter Glass Button is a premium component built for landing pages, creative campaigns, and portfolios."
canonical: "https://framer.elliotli.dev/component/shatter-glass-button"
---

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

# Shatter Glass Button

Glass CTA with shatter interaction

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

![Shatter Glass Button preview image 1](https://framer.elliotli.dev/og/component/shatter-glass-button/3fa00c644d50e0a2/1600x1200.jpg)

## Summary

Shatter Glass Button is a premium component built for landing pages, creative campaigns, and portfolios.

## Description

Shatter Glass Button is a premium component built for landing pages, creative campaigns, and portfolios. Instead of a generic ripple effect, it uses a cinematic shatter interaction: clicking the glass triggers an instant procedural fracture that radiates outwards, complete with an impact flash and auto-dismissing cracks.

The result is a button that feels physical, destructive, and highly memorable — ideal when a standard flat CTA is not enough.

\## Key features

\- Two crack modes: Spider Web or Bullet Hole.

\- Procedural SVG fracture paths that animate dynamically.

\- Authentic glassmorphism with frosted blur and edge refractions.

\- Light and Dark glass themes for any background color.

\- Central impact flash and auto-dismissing cracks.

\- Fully responsive and easy to drop into any layout.

\- Designed for cinematic, high-end, and immersive interfaces.

\## Perfect for

\- Creative agency portfolios.

\- Web3, gaming, and crypto landing pages.

\- High-end product drops or waitlists.

\- Unconventional hero sections.

\- CTA buttons that need maximum visual impact.

\## Suggested controls

\- Text and typography.

\- Crack mode (Spider Web / Bullet Hole).

\- Glass theme (Light / Dark).

\- Glass tint color.

\- Crack color.

\- Hole size.

\- Corner radius.

\## Marketplace positioning

This is not a traditional, quiet UI button. It is a cinematic motion element for designers and creatives who want their primary CTA to feel physical, unexpected, and undeniably premium.

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

-   All · #8152

## Details

- **Author**: JIetForce
- **Price**: $5.00
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-04-30
- **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