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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You do not need to trace the trigonometry behind the burst by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the (i / n) * Math.PI * 2 angle spacing combined with the random jitter and random dist keeps the twelve particles evenly spread instead of clumping, and why the animate().onfinish callback is what prevents particle buildup in the DOM. The same assistant can help optimize it, for example asking whether appending and animating twelve fresh DOM nodes per like could be replaced with a canvas-based burst for a feed with many simultaneous like buttons. It is also useful for extending the interaction: ask it to vary the burst shape for a dislike or superlike action, add a haptic-style CSS shake on rapid re-taps, or scale burst intensity with the like count milestone reached. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "like burst button" in plain HTML, CSS, and JavaScript using the Web Animations API for the particle burst — no canvas, no libraries.

Requirements:
- A real button element containing a heart icon and a numeric count, with aria-pressed toggled between "true" and "false" to reflect the liked state.
- On like, add a class that fills the heart a solid color and plays a CSS keyframe that scales it from 0 up past 1 (an overshoot, e.g. 1.25) and back down to 1, using an easing curve that produces a visible spring bounce rather than a linear scale-in.
- On each like, dynamically create a fixed number of small particle elements (e.g. twelve), append them over the heart, and assign each an angle evenly spaced around a full circle using index divided by total times 2*PI, with a small random offset added to the angle and a random distance so the burst looks organic rather than mechanically uniform.
- Animate every particle with element.animate() (not CSS classes) from the heart's center out to a position computed from cos(angle)*distance and sin(angle)*distance, shrinking to scale 0 and fading opacity to 0, with a slightly randomized duration per particle so they do not all finish in unison.
- Each particle's animation must remove that specific particle element from the DOM in its onfinish callback, so particles never accumulate across repeated likes.
- Clicking again must unlike: revert the heart color, decrement the count, and must NOT trigger a new burst, since the burst is reserved for the positive like action only.
- The count must update immediately on click (optimistic update) rather than waiting for any simulated network response.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA like button shows a gray heart and a count.
2
Click the heartIt pops red and sprays a burst of colorful particles.
3
Watch the countIt ticks up immediately on like.
4
Click againIt unlikes and the count drops, with no burst.
5
Tune the burstChange particle count, colors, and spread.
6
Wire your APIFire the real request in the click handler.

Real-world uses

Common Use Cases

Social feeds

Like posts in a social post card.

Reaction controls

Pair with an emoji reaction bar.

Bookmarks and saves

An alternative to a favorite button.

Product wishlists

Heart items on a product card.

Comment upvotes

Celebrate a voting buttons action.

Particle demos

A reference for radial WAAPI bursts.

Related: Push Notification Subscription Toggle

See the Push Notification Subscription Toggle for a related buttons pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

On each like, twelve particle dots are appended over the heart, each colored from a palette and sent to an angle of (i / n) times 2 pi — evenly around the circle — with slight random jitter and a random distance. Animating each from the center to its cos and sin offset while scaling to zero and fading produces the firework spray. The even angular spacing makes it read as a deliberate burst.

Each particle is animated with the Web Animations API, whose returned handle has an onfinish callback. That callback removes the particle when its animation completes, so they clean themselves up. This fire-and-forget pattern avoids managing CSS classes and animationend listeners across a dozen short-lived elements.

The lkPop keyframe scales the heart from 0 past 1 to 1.25 and settles back to 1 on an overshooting cubic-bezier. That brief overshoot is a spring bounce, so the heart appears to spring into existence rather than simply changing color. The count turning red at the same moment reinforces the active state.

It is an optimistic update: toggling adjusts the count immediately so the UI feels instant. In a real app you fire the like request in the background and reconcile if it fails. Decoupling the visual from the round-trip is what makes the interaction feel responsive even on a slow connection.

Keep liked and count in state and toggle them on click, calling your API in the background. Trigger the burst by appending particles to a ref and animating them with element.animate, cleaning up on finish — keep this out of the render path. Use aria-pressed bound to the liked state. The heart pop is pure CSS. In Tailwind, animate the pop with a keyframe and run the particles in the handler.

Loading…