Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
A parent cannot normally react to its own children, which is why this pattern used to need JavaScript. :has() turns the relationship around: label:has(:checked) styles the whole card from the state of the input inside it. One selector, no classes to toggle, no listeners — CSS reading its own subtree like an if-statement.
A custom-styled checkbox featuring an SVG checkmark that draws itself with a smooth stroke animation. It supports unchecked, checked, and indeterminate states while maintaining native accessibility.
A collection of five distinct animated checkbox styles, demonstrating custom styling, transitions, pseudo-elements, and transforms to create interactive and visually appealing checkbox and toggle components.
A toggle switch that animates with a bouncy fill effect and a sliding thumb. The track fills with color from left to right as the thumb slides, both with an elastic transition.