Bouncy radio buttons using modern CSS
A fun CSS-only experimentation using modern features to create bouncy radio buttons. Powered by anchor positioning, @property, :has() selector, and more!
Click for a cool effect!
See the Pen Bouncy input radio! by Temani Afif (@t_afif) on CodePen.
And the horizontal version as well
See the Pen Bouncy input radio II by Temani Afif (@t_afif) on CodePen.
A related article to understand the logic behind the hacky part and the strange cubic-bezier(): Advanced CSS Animation Using cubic-bezier()
More CSS Tips
- Trim extra space using text-box An interactive tool to illustrate how to trim the extra space below and above text.
- Perfectly center an uppercase text One line of code and you can have a true centering for any uppercase text.
- Inverted radius shape with hover effect An inverted border-radius shape with a fancy reveal animation on hover.
- A single-element star rating component (without JS) Using a few lines of code to transfom the native range slider into a star rating component.