Create Fun Animated Radio Buttons With Radiobox.css

Datetime:2017-04-11 05:45:10         Topic: CSS3          Share        Original >>
Here to See The Original Article!!!

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.

Read Also: UI Design: Customize Checkboxes and Radio Buttons with CSS3

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_ .

Read Also: A Look Into HTML5 Forms Input Types: Date, Color and Range