Skip to content

feat(submission): add css-only particle burst button on click (#55617) #55628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 1 commit into from
Jul 25, 2026
+100 −0
Merged

feat(submission): add css-only particle burst button on click (#55617) #55628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions submissions/examples/particle-burst-55617/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# CSS-Only Particle Burst Button

## What does this do?
A button that shoots out a burst of "particles" or confetti when clicked. While this usually requires JavaScript, it can be achieved in pure CSS using the `:active` state and complex, multi-layered `box-shadow` animations that expand outward and fade.

## How is it used?
```html
<button class="ease-btn-particle">Click Me 🎉</button>
```

## Why does it fit EaseMotion CSS?
It relies entirely on the CSS `:active` pseudo-class and highly optimized `box-shadow` manipulations to create a gamified micro-interaction. It's extremely satisfying to click and delightfully avoids heavy canvas or DOM element injections for particles.

## Tech Stack
- HTML
- CSS (No JavaScript)
23 changes: 23 additions & 0 deletions submissions/examples/particle-burst-55617/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particle Burst Button Demo</title>
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
height: 100vh;
background-color: #f8fafc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<button class="ease-btn-particle">Click Me 🎉</button>
</body>
</html>
61 changes: 61 additions & 0 deletions submissions/examples/particle-burst-55617/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
.ease-btn-particle {
position: relative;
appearance: none;
background: #f43f5e;
padding: 12px 24px;
border: none;
color: white;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
outline: none;
z-index: 2;
transition: transform 0.1s ease;
}

.ease-btn-particle:active {
transform: scale(0.95);
}

.ease-btn-particle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-radius: 8px;
z-index: -1;
pointer-events: none;
background-color: transparent;
transition: all 0.3s ease;
}

.ease-btn-particle:active::before {
/* Complex box-shadow to simulate multiple particles flying out */
box-shadow:
-30px -40px 0 0 rgba(244, 63, 94, 0.8),
40px -30px 0 0 rgba(244, 63, 94, 0.6),
35px 35px 0 0 rgba(244, 63, 94, 0.4),
-40px 30px 0 0 rgba(244, 63, 94, 0.7),
-10px -50px 0 0 rgba(244, 63, 94, 0.5),
50px 10px 0 0 rgba(244, 63, 94, 0.9),
10px 50px 0 0 rgba(244, 63, 94, 0.3),
-50px -10px 0 0 rgba(244, 63, 94, 0.8);
animation: ease-particle-burst 0.5s ease-out forwards;
}

@keyframes ease-particle-burst {
0% {
width: 100%;
height: 100%;
opacity: 1;
}
100% {
width: 200%;
height: 250%;
opacity: 0;
}
}
Loading