Radiobox.css

<p align="center"> <img src="http://i.imgur.com/RMT4UHE.png" width="250"/> </p> <p align="center" style="text-align:center"> <b>A tiny set of CSS3 animations designed for your radio inputs. </b> </p> <p align="center"> <sub style="font-size:12px;"> ... and for checkbox inputs check out <a style="font-size:12px;" href="https://github.com/720kb/checkbox.css">checkbox.css</a> </sub> </p> <p align="center"> <sub style="font-size:12px;"> ... and for super powers check out <a style="font-size:12px;" href="https://github.com/720kb/checked.css">checked.css</a> </sub> </p> </br> <p align="center" style="text-align:center"> <a href="https://gitter.im/720kb/?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge" target="_blank"> <img src="https://badges.gitter.im/Join%20Chat.svg"/> </a> </p> <br/> <p align="center" style="text-align:center"> <b>Installation</b> </p> <p align="center" style="text-align:center"> Include the <i>dist/css/radiobox.min.css</i> in your html page </p> <p align="center" style="font-size:12px;"> _{<i>Include dist/css/boing/boing.min.css instead, if you want to use only the <b>Boing</b> animation, for example.</i>} </p> <br/> <p align="center" style="text-align:center"> <b>Animations</b> </p> <p align="center" style="text-align:center"> Boing </p> <p align="center" style="text-align:center"> Pump </p> <p align="center" style="text-align:center"> Hooray </p> <p align="center" style="text-align:center"> Ufo </p> <p align="center" style="text-align:center"> Scatman </p> <p align="center" style="text-align:center"> Vertigo </p> <p align="center" style="text-align:center"> Flash </p> <p align="center" style="text-align:center"> Return </p> <p align="center" style="text-align:center"> Boom </p> <p align="center" style="text-align:center"> Wheel </p> <p align="center" style="text-align:center"> Focus </p> <p align="center" style="text-align:center"> Tremolo </p> <p align="center" style="text-align:center"> Ping </p> <br/> <p align="center" style="text-align:center"> <b>Usage</b> </p> <p align="center" style="text-align:center"> <code style="color:royalblue"> <b>&#x3C;input</b> type="radio" class="<b>radiobox-boing</b>"<b>/&#x3E;</b> </code> </p> <br/> <p align="center" style="text-align:center"> <b>Browsers Support</b> </p> <p align="center" style="text-align:center"> <i>Depending on:</i> </p> <p align="center" style="text-align:center"> <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D Transform</a> </p> <p align="center" style="text-align:center"> <a href="http://caniuse.com/#feat=css-animation" target="_blank">Keyframes</a> </p> <br/> <p align="center" style="text-align:center"> <b>Demo</b> </p> <p align="center" style="text-align:center"> <a href="https://720kb.github.io/radiobox.css">Here</a> </p> <br/> <p align="center" style="text-align:center"> <b>Mantainers</b> </p> <p align="center" style="text-align:center"> <a href="http://720kb.net">720kb</a> </p> <br/> <p align="center" style="text-align:center"> <br/> <b>License</b> </p> <p align="center" style="text-align:center"> (MIT) read <a href="https://github.com/720kb//blob/gh-pages/LICENSE.md">LICENSE.md</a> </p>