Awesome Check Interactions For Radio Buttons – radiobox.css

Category: Animation , Form | February 25, 2020
Views Total:452 views
Official Page:Go to website
Last Update:February 25, 2020


Awesome Check Interactions For Radio Buttons – radiobox.css


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>

You Might Be Interested In:

Leave a Reply