Awesome Check Interactions For Radio Buttons – radiobox.css

Preview:

Description:

Similar to the checkbox.css, radiobox.css is a pure CSS library that provides a set of 13 pretty awesome animations to radio buttons on check and uncheck.

See It In Action:

How to use it:

1. Load the minified version of the radiobox.css library from the dist folder.

<link rel="stylesheet" href="./dist/css/radiobox.min.css" />

2. Apply the following animation class to the radio buttons and done. Available animations:

1. Boing
2. Pump
3. Hooray
4. Ufo
5. Scatman
6. Vertigo
7. Flash
8. Return
9. Boom
10. Wheel
11. Focus
12. Tremolo
13. Ping

<label><input type="radio" name="x" class="radiobox-focus"/> Focus</label>
<label><input type="radio" name="x" class="radiobox-tremolo"/> Tremolo</label>
<label><input type="radio" name="x" class="radiobox-boing"/> Boing</label>
<label><input type="radio" name="x" class="radiobox-scatman"/> Scatman</label>
<label><input type="radio" name="x" class="radiobox-ufo"/> Ufo</label>
<label><input type="radio" name="x" class="radiobox-flash"/> Flash</label>
<label><input type="radio" name="x" class="radiobox-return"/> Return</label>
<label><input type="radio" name="x" class="radiobox-boom"/> Boom</label>
<label><input type="radio" name="x" class="radiobox-vertigo"/> Vertigo</label>
<label><input type="radio" name="x" class="radiobox-pump"/> Pump</label>
<label><input type="radio" name="x" class="radiobox-hooray"/> Hooray</label>
<label><input type="radio" name="x" class="radiobox-wheel"/> Wheel</label>
<label><input type="radio" name="x" class="radiobox-ping"/> Ping</label>