Particle Burst
A warm, dark editorial button. Click and eighteen triangular shards explode outward in a full circle — each a random size, colour, and spin — like struck flint throwing sparks.
Particle Burst the 12th of 43 designs in the 43 CSS Button Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="btn-shard-surface">
<button class="btn-shard">
<span class="btn-shard-canvas" aria-hidden="true"></span>
<span class="btn-shard-label">Illuminate</span>
</button>
</div> .btn-shard-surface {
display: flex;
align-items: center;
justify-content: center;
padding: 48px 56px;
background: #0c0c0f;
border-radius: 16px;
}
.btn-shard {
position: relative;
padding: 16px 44px;
border: 1px solid rgba(232,213,176,0.2);
background: linear-gradient(135deg, #1a1206 0%, #2c1f0a 100%);
color: #e8d5b0;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
font-weight: 400;
font-style: italic;
letter-spacing: 1px;
cursor: pointer;
user-select: none;
transition: border-color 0.3s, background 0.3s, transform 0.1s;
}
.btn-shard:hover {
border-color: rgba(232,213,176,0.5);
background: linear-gradient(135deg, #221a0a 0%, #3a2810 100%);
}
.btn-shard:active { transform: scale(0.97); }
.btn-shard-label { position: relative; z-index: 1; }
.btn-shard-canvas {
position: absolute;
inset: -60px;
z-index: 10;
pointer-events: none;
}
.btn-shard-piece {
position: absolute;
width: var(--w, 6px);
height: var(--h, 6px);
background: var(--c, #e8d5b0);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
animation: btn-shard-fly 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-shard-fly {
0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
100% { transform: translate(var(--tx,0px), var(--ty,-60px)) rotate(var(--r,360deg)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn-shard-piece { animation: none; display: none; }
} document.querySelectorAll('.btn-shard').forEach(function (btn) {
var colors = ['#e8d5b0', '#f5c842', '#ff8c42', '#e8d5b0', '#fff8e7'];
btn.addEventListener('click', function (e) {
var canvas = btn.querySelector('.btn-shard-canvas');
var cr = canvas.getBoundingClientRect();
var cx = e.clientX - cr.left;
var cy = e.clientY - cr.top;
for (var i = 0; i < 18; i++) {
var piece = document.createElement('span');
piece.className = 'btn-shard-piece';
var angle = (i / 18) * Math.PI * 2 + (Math.random() - 0.5) * 0.5;
var dist = 40 + Math.random() * 70;
var size = 4 + Math.random() * 8;
piece.style.left = cx + 'px';
piece.style.top = cy + 'px';
piece.style.setProperty('--tx', (Math.cos(angle) * dist) + 'px');
piece.style.setProperty('--ty', (Math.sin(angle) * dist) + 'px');
piece.style.setProperty('--r', (Math.random() * 360 - 180) + 'deg');
piece.style.setProperty('--w', size + 'px');
piece.style.setProperty('--h', size + 'px');
piece.style.setProperty('--c', colors[Math.floor(Math.random() * colors.length)]);
piece.style.animationDelay = (Math.random() * 0.1) + 's';
canvas.appendChild(piece);
piece.addEventListener('animationend', function () { this.remove(); });
}
});
});