---
title: "Shatter Button — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Talha Manzoor · Buttons. Interactive shattering glass butto"
canonical: "https://framer.elliotli.dev/component/shatter-button"
---

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

# Shatter Button

Interactive shattering glass butto

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

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

## Summary

Interactive shattering glass butto

## Description

**Description:**

A glass-textured button that cracks and shatters exactly where you click, with physically simulated shards that fall away and drop out of view — then reforms once your cursor leaves.

**How it works:**

-   Click anywhere on the button and cracks radiate outward from that exact point
    
-   The break spreads naturally outward from the impact point to the edges, not all at once
    
-   Glass shatters into real Voronoi-based fragments, each sampling the actual button texture and label
    
-   Pieces fall with simulated gravity and drop out of view at the bottom
    
-   The void stays empty as long as your cursor remains over the button, and only reforms once you move away
    
-   3D tilt follows your cursor for a tactile, physical feel
    

**Fully customizable:**

-   Label text, font, and color
    
-   Optional link with new-tab control
    
-   Layout: border radius and padding
    
-   Glass surface: solid, linear, or radial fill with full color and angle/position control
    
-   Native border and box-shadow controls, including separate hover states
    
-   Crack behavior: ray count, length, grow speed, and impact glow
    
-   Shard physics: gravity, drift, spin, fall tint, and edge highlight
    
-   3D tilt strength
    

**Best used for:**

-   Hero CTAs on portfolio, agency, or product sites that want a distinctive, physical interaction
    
-   Gaming, tech, or creative brand sites looking for a tactile "break the glass" moment
    
-   Any page where a standard button feels too flat and the brand can support a bolder, more playful interaction
    

**Refund Policy:**

All sales are final. Due to the nature of digital products, no refunds, exchanges, or cancellations are offered once the component has been delivered. Please review the preview and feature list carefully before purchasing.

**Support:**

Questions, bugs, or help integrating this into your project? Reach out any time at [acreziodesmond@gmail.com](mailto:acreziodesmond@gmail.com) — happy to help.

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

-   All · #6518

## Details

- **Author**: Talha Manzoor
- **Price**: $4.00
- **Published**: 2026-08-19
- **Updated**: 2026-08-19
- **Added**: 2026-08-19
- **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