Like Burst Button — Free HTML CSS JS Heart Particle Snippet

The like burst button is the satisfying social interaction — popularized by Twitter and Instagram — where tapping a heart makes it pop into color and spray a radial burst of colorful particles outward, with the count ticking up. This snippet builds it with plain HTML, CSS, and vanilla JavaScript using the Web Animations API for the particles.

The heart pop

The heart is an inline SVG that is gray at rest. On like, a .liked class fills it red and runs the lkPop keyframe, which scales it from 0 up past 1 to 1.25 and settles back to 1 on an overshooting cubic-bezier. That brief overshoot is the bounce that makes the heart feel like it springs to life rather than just recoloring. The count next to it also turns red, reinforcing the active state.

The radial particle burst

The burst is generated on each like: twelve small particle dots are created and appended over the heart, each assigned a color from a small palette. The key is the radial distribution — each particle is sent to an angle of (i / n) * 2π (evenly around the circle) with a little random jitter, at a random distance, computed with cos/sin. Animating each particle from the heart center out to its (cos·dist, sin·dist) offset while scaling to zero and fading produces the firework spray. The even angular spacing is what makes it read as a deliberate burst rather than random scatter.

Web Animations API for fire-and-forget particles

Each particle animates with element.animate(), which returns a handle with an onfinish callback used to remove the particle from the DOM when its animation completes (this.effect.target.remove()). This fire-and-forget pattern means particles clean themselves up and never accumulate, without managing CSS animation classes or animationend listeners across a dozen short-lived elements. Randomizing each particle duration slightly makes the burst dissipate organically rather than all at once.

Optimistic toggle and count

Clicking toggles the liked state and adjusts the count immediately (+1 on like, -1 on unlike) — an optimistic update that makes the UI feel instant. Unliking removes the red state without a burst, since bursts celebrate the positive action. In a real app you would fire the network request in the background and reconcile if it fails; the visual is decoupled from the round-trip.

Accessible state

The control is a real <button> with aria-pressed that flips between true and false, so assistive tech announces the like as a toggle button with its current state — the correct semantics for a like control, rather than a generic clickable element.

Customizing it

Change the particle count, colors, spread distance, and durations for a bigger or subtler burst, adjust the heart pop overshoot, recolor the liked state, or swap the heart for a star or thumbs-up. Wire the click to your real API. Pair it with a favorite button or an emoji reaction bar for a full reaction set.