Wishlist Heart Button — Free HTML CSS JS Like Snippet

The heart/favourite/wishlist toggle is everywhere — product cards, listings, posts, playlists — and the satisfying ones share two traits: a springy pop when you tap them and a little burst of particles confirming the action. This component delivers both, in two variants (a pill button with a live count and a bare icon button), with an optimistic count update and proper aria-pressed state. It is built in HTML, CSS, and vanilla JavaScript, and the animations are pure CSS keyframes re-triggered from JavaScript.

Toggle state on aria-pressed

Rather than tracking state in a JavaScript variable or an extra class, the button's on/off state lives in its aria-pressed attribute — which is also exactly what a toggle button needs for accessibility. CSS targets [aria-pressed="true"] to fill the heart red, tint the button background pink, and recolour the count, so the visual state is driven directly by the accessibility state. There is one source of truth, and screen readers announce the button as "pressed" when it is favourited.

The spring pop

When you favourite, the heart plays a whbPop keyframe: it dips to scale(0.78), overshoots to scale(1.25), and settles back to scale(1), using a cubic-bezier(0.2, 1.6, 0.4, 1) easing whose value above 1 creates the spring overshoot. This squash-then-stretch is what makes the tap feel physical and rewarding rather than a flat colour change. The pop only plays on toggle-on, not toggle-off, matching the asymmetry users expect (favouriting is celebrated; un-favouriting is quiet).

Re-triggering a CSS animation

A CSS animation only plays once when its class is added; adding the same class again does nothing because the class is already present. To replay the pop on every favourite, the handler removes the animation classes, forces a reflow with void btn.offsetWidth — which flushes the style change so the browser treats the next class add as a fresh animation — then re-adds them. This reflow trick is the standard way to restart a CSS animation from JavaScript, and it is why rapid repeated taps each get their own pop.

The particle burst

Around the heart, a .whb-burst element fires six dots outward on favourite. The trick is doing six particles with no extra DOM: a ::before and ::after pseudo-element each carry three dots via a triple box-shadow, and the keyframes animate those shadows from the centre outward (up-left, up-right, up; and down-left, down-right, down) while fading to transparent. Each dot is a different pink/rose shade. It is a self-contained confetti effect in pure CSS — no canvas, no particle library, no DOM churn — that cleans itself up when the animation ends.

Optimistic count

The pill variant shows a like count. On toggle it updates immediately — plus one on favourite, minus one on un-favourite — parsed from the displayed text and re-formatted with toLocaleString() so large counts keep their thousands separators, and rendered with tabular-nums so the digits do not shift width as the number changes. This is an optimistic update: the UI responds instantly rather than waiting for a server, which is what makes the interaction feel snappy. In production you would reconcile with the real count from your API.

Customisation

Both variants are wired by one wireHeart() function applied to every .whb-btn and .whb-icon, so you can drop the markup anywhere and it just works. Swap the rose palette (#f43f5e and the burst shades) for your brand, adjust the pop easing and the burst distances in the keyframes, and connect the click handler to your favourite/wishlist API. Pre-set aria-pressed="true" to render an already-favourited item on load.