Voting Buttons — Free Upvote Downvote HTML CSS JS Snippet

Voting buttons are the up/down arrows beside a post, comment, or feature request that let users rate it and surface the best content — the pattern Reddit, Stack Overflow, and Product Hunt are built on. This snippet implements the full interaction in plain HTML, CSS, and vanilla JavaScript: an upvote and downvote arrow, a live score between them, three-state toggle logic, and color feedback, with no framework or dependency.

Three-state toggle logic

Each row tracks one of three states — upvoted (+1), neutral (0), or downvoted (-1) — in a votes map keyed by item id. The key behaviour is that clicking the *already-active* arrow clears the vote rather than re-applying it: votes[id] = (votes[id] === dir) ? 0 : dir. That single expression handles every transition (up→neutral, up→down, neutral→down, and back) the way users expect, so there is no separate "remove vote" button.

Score derived from a base, never mutated

The displayed number is computed as base + vote, where base is the server-side tally and vote is only the current user's contribution. Keeping the base immutable and deriving the score on every render means the count is always correct after any sequence of clicks — you can't drift out of sync by toggling rapidly, because nothing is incremented in place.

Color and motion feedback

The score turns green when positive, red when negative, and neutral at zero, and the active arrow fills with a matching tint via the .on class. Every change triggers a short vbBump keyframe — the number lifts and scales briefly — restarted reliably with the void el.offsetWidth reflow trick so the animation replays even on consecutive clicks. The arrows also scale down on :active for a tactile press.

Accessible by default

Arrows are real <button> elements with aria-label and aria-pressed reflecting the current vote, so screen readers announce "Upvote, pressed" correctly and keyboard users can Tab and activate them with Enter or Space — no extra wiring needed.

Wiring to real data

Replace the DATA array with your posts and send a request in cast() (the single choke point for every vote) to POST the new direction; optimistic UI already updates instantly, so you only need to reconcile on error. The scoreFor() helper is pure, making it trivial to also sort the list by score for a "hot" or "top" ranking.