Create Fun Animated Radio Buttons With Radiobox.css

By Jake Rocheleau. in Toolkit. Updated on April 9, 2018.

The default HTML5 radio buttons are pretty boring. There are ways to customize them using CSS3, but most techniques focus only on looks.

Radiobox.css focuses on looks and style adding custom CSS3 animations to radio inputs.

This library is totally free and open source, available on GitHub to download. With this CSS library, you can pick from more than 12 different animations that apply to radio buttons.

Without custom CSS styles, they’ll still look like normal radio inputs. But when the user clicks to select a button they’ll get a crazy animation effect. You can see live examples on the main Radiobox page which demos each style next to its name.

You can install Radiobox straight from npm or bower, or even download the files locally to your machine. GitHub hosts all their files in a CDN if you want to play around without downloading anything.

The only file you need is radiobox.min.css which should go right into your document head. From there, you just add a simple class to each radio button depending on the animation you want.

Here’s a code snippet for the “boing” effect:

<input type="radio" class="radiobox-boing">

Note the “boing” animation does have its own CSS file called boing.min.css. This has to be included if you plan to use that effect on the page.

When you download Radiobox you should get a demo directory with live demos for all these effects. You can simply copy/paste the code directly to your page to get it working without hassle.

For full documentation, check out the main repo along with the live demo site. If you wanna contact the creators you can send an email from the 720kb website or message via Twitter @720kb_.