pretty-checkbox.css

A pure CSS library to beautify checkbox and radio buttons.

$3

* Basic
- Shapes - Square, Curve, Round
- Variants - Default, Fill, Thick
- Colors - Primary, Success, Info, Warning, Danger
- Color types - Solid, Outline
- Animations - Smooth, Tada, Jelly, Pulse, Rotate
Switch - iOS style - Outline, Fill, Slim*
* Responsive
* No JavaScript
* Custom Font Icons
* SVG Icons
* Image support
* Toggle between icons / SVG's / images
* Lock
State - Focus, Hover, Indeterminate*
Supports frameworks - Bootstrap, Foundation, Sematic UI, Bulma*, ...
* SCSS customization
* Supports all modern browsers, including mobile devices
* Print friendly
and more... ( I am kidding, that's all!* )

$3

- From CLI

Install the library from npm or yarn package manager

``sh
> npm install pretty-checkbox // or
> yarn add pretty-checkbox
`
Add pretty-checkbox.min.css in your html




- From CDN ( jsDelivr )
`html

`




- Manual download ( Github )

Download the source from Github.
`html

`
is where the library is downloaded.




SCSS

You can also import pretty-checkbox.scss in your main scss file.
`scss
@import '~pretty-checkbox/src/pretty.scss';
`

Please refer the document for SCSS settings.

$3

Pretty checkbox comes with many styles,

| Class name | Description |
| :---------- | :----------------------- |
| p-default | Basic style |
| p-switch | iOS like toggle style |
| p-icon | Custom font icons |
| p-svg | Custom SVG files, markup |
| p-image | Tiny images |

And three shapes p-round p-curve p-square (default)


#### Basic checkbox

`html

Check me

`

Basic checkbox has three variants p-fill p-thick p-outline (default)

You can combine them.

`html

Fill

`

---

#### Switch checkbox

Switch has three variants p-outline p-fill p-slim

`html

On

`

---

#### Custom Font icons

`html

Check me

`





Note: class icon should be added along with icon class names



_{Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately.}

_{more details}

---

#### SVG

Supports SVG file in tag, markup () and sprites

`html

Check me

`





Note: class svg to be added in img tag or svg tag.



_{more details}

---

#### Image

Supports any type of valid image format.

`html

Block

`





Note: class image to be added in img tag.



_{more details}

---

#### Colors

There are five solid colors p-primary p-success p-warning p-info p-danger

And five outline colors p-primary-o p-success-o p-warning-o p-info-o p-danger-o

`html

Warning

`

_{Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.}

_{more details}

$3

There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.

Please refer the documentation to know about them.

$3

Works in all modern browsers.

Chrome >= 26 Firefox >= 16 Safari >= 6.1 Opera >= 15 IE >= 9`

$3

* Font awesome
* Bootstrap Glyphicons
* Material icon ( MDI )
* Material icon ( ZMDI )
* Ion icons
* Typicons
* Material icon ( Google )
* Others not tested, but will work ( 99% ).

$3

* UIKit
* Feathers
* Others

$3

- Awesome Bootstrap Checkbox - Idea
- Animista - Animations

$3

Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!

$3

This project is licensed under the MIT License

_❤