---
title: "Sparkle Dashed — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. Dynamic Burst Animation"
canonical: "https://framer.elliotli.dev/component/sparkle-dashed"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Sparkle Dashed

# Sparkle Dashed

Dynamic Burst Animation

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

![Sparkle Dashed preview image 1](https://framer.elliotli.dev/og/component/sparkle-dashed/291149c34a086dc1/1600x1054.jpg)

## Summary

Dynamic Burst Animation

## Description

## **About**

**Sparkle Button** is a playful, high-energy call-to-action component featuring an animated burst effect on hover. When visitors hover over the pill-shaped button, colorful tick accents shoot outward in a springy starburst pattern, giving your page an instant pop of personality and joy.

## **What it does**

-   **Dynamic Burst Animation:** Hovering triggers six directional accent lines to scale out and expand around the button perimeter with a snappy spring timing.
    
-   **Micro-Scale Easing:** The button itself gently expands (`scale 1.02`) on hover to create depth and a tactile feel.
    
-   **Staggered Motion:** Sparkle lines shoot out with micro-delays, giving the burst a natural, organic feel rather than a stiff simultaneous pop.
    
-   **Canvas Friendly:** Cleanly handles Framer canvas editing and static preview modes without erratic animation loops.
    

## **What you can customize**

Full control directly from Framer’s right-hand property panel — no code needed:

-   **Text** — Button label (e.g., _"Explore Features"_, _"Get Started"_, _"Claim Offer"_)
    
-   **Link** — Destination page or external link (supports opening in a new tab)
    
-   **Font** — Select any typography family, weight, or style
    
-   **Font Size** — Adjustable text sizing in pixels (default: `20px`)
    
-   **Text Color** — Custom color for the button label (default: `#000000`)
    
-   **Button Bg** — Default resting pill background color (default: `#FFE81A`)
    
-   **Hover Bg** — Optional color swap when visitors hover over the button
    
-   **Burst Color** — Color of the surrounding animated sparkle lines (default: `#000000`)
    
-   **Padding H & V** — Fine-tune horizontal and vertical internal button spacing
    

## **Need help?**

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

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

-   All · #6244

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-22
- **Updated**: 2026-07-23
- **Added**: 2026-07-22
- **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