PURE CSS — NO JAVASCRIPT
The Like Button
Just a hidden <input type="checkbox">, a <label> and an unreasonable amount of CSS. Click the heart. Go on — it goes crazy.
Tap the heart to like it
♥ You loved it! ♥
♡ 1,284 people liked this ♥ 1,285 people liked this
↑ Click the heart — or Tab + Space · click again to unlike
How it works — zero JavaScript
01
Hidden checkbox
The checkbox silently holds the “liked” state. No JS, no storage — just :checked.
02
Label = button
Clicking the <label> toggles the input, which flips every :checked ~ … rule instantly.
03
Pure CSS chaos
Particles, shockwave rings, rotating rays, confetti rain, floating hearts and a stage shake — all keyframes.
<!-- the entire “app” -->
<input type="checkbox" id="like">
<label for="like" class="heart">♥</label>
input:checked ~ label .heart {
animation: pop .6s, burst .95s, floatUp 2.4s infinite;
}