Repository files navigation

No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library.Only CSS!

Check it out theDemo for complete documentation.

Install the library frombower ,npm oryarn package manager

> bower install pretty-checkbox

> npm install pretty-checkbox

> yarn add pretty-checkbox

Addpretty.min.css in your html

From CDN,

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.1/pretty.min.css"/>

or from the source,

<linkrel="stylesheet"href="../PATH/pretty-checkbox/src/pretty.min.css"/>

You can also importpretty.scss in your main scss file.

@import'../PATH/pretty-checkbox/src/pretty.scss';

PATH is where the library is downloaded.

Checkbox markup,

<divclass="pretty"><inputtype="checkbox"/><label><iclass="mdi mdi-check"></i> Buy vegetables</label></div>

<divclass="pretty primary"><inputtype="checkbox"/><label><iclass="mdi mdi-check"></i> Primary</label></div>

<divclass="pretty"><inputtype="radio"name="radio"><label><iclass="mdi mdi-check"></i> Option 1</label></div><divclass="pretty"><inputtype="radio"name="radio"><label><iclass="mdi mdi-check"></i> Option 2</label></div>

Refer theDocumentation for other features and sass settings.

This library supports wide variety of font icon libraries. Currently tested withFontAwesome ,Bootstrap Glyphicon ,Google Material Design icons(material.io),Material Design icons (mdi) ,Material Design icons (zmdi) ,Typicons ,Ionicons.

• Scalable. Can be used in any font sizes
• Cool animations and toggle features
• Customizable. See the demo forsass settings
• Used in frameworks like bootstrap, Foundation, Sematic UI
• Supported in all mordern browsers, including mobile devices
• Print friendly
• MIT Licence

Thats all, folks!

• Inspired from Okendoken'sawesome-bootstrap-checkbox.
• Crazy animations are heavily inspired ( copied 😊 ) fromAnimista

Contributions are welcome!