0 lines of JavaScript
Pure CSS  •  Zero JavaScript

The Crazy
Like Button

One hidden checkbox, a <label> and a storm of @keyframes. No script. No libraries. Just CSS going absolutely feral.

♥ LIKED!
Like itLoved! ♥
likes
click again to unlike ↺
👆Click the heart!  or focus it and press Space — pure CSS does the rest

Under the hood

:checkedCheckbox hack
20Particles
0Lines of JS

Checking the box triggers :checked sibling selectors. Every particle, ring and confetti piece is just CSS transform + opacity animated with custom properties.

The trick

<!-- pure CSS, no JS -->
<input type="checkbox" id="like">
<label for="like">♥</label>

#like:checked ~ .heart {
  animation: heartPop .9s;
}
#like:checked ~ .particles {
  animation: burst 1s;
}