ButtonIt, jQuery plugin!

this plugin converts radio and checkbox into button like elements

Buy Now

Demos

<input type="radio" data-icons="fa fa-male|fa fa-times" data-labels="I'm a man|I'm not a man" id="radio" name="salutation" value="Man" class="demo">
<input type="radio" data-icons="fa fa-female|fa fa-times" data-labels="I'm a woman|I'm not a woman" name="salutation" id="radio1" value="Woman" class="demo">
            
<input type="checkbox" id="demo2" name="demo2" class="demo">
              
<input type="checkbox" data-labels="I want to subscribe to the newsletter|I don't want to subscribe to the newsletter" id="checkbox" name="newsletter" class="demo">
<input type="checkbox" data-labels="I have read and accept the terms and conditions|I don't have read and accept the terms and conditions" id="demo1" name="terms" class="demo">

Installation

HTML

Just use the default checkbox or radio input. Add data-attributes if you don't want the default icons or text. 
<input type="radio" class="YOUR_CLASS" id="YOUR_UNIQUE_ID" data-labels="" data-icons="" >
<input type="checkbox" class="YOUR_CLASS" id="YOUR_UNIQUE_ID" data-labels="" data-icons="" >

INIT Plugin

$('SELECTOR_CLASS').buttonIt();

$('SELECTOR_CLASS').buttonIt({
    checked: 'CHECKED MESSAGE',
    unchecked: 'UNCHECKED MESSAGE'
});

Options

checked Default: 'Checked'
Your default text for checked inputs
unchecked Default: 'Unchecked'
Your default text for unchecked inputs
checkedIcon Default: 'fa fa-check'
Your default icon for checked inputs.
uncheckedIcon Default: 'fa fa-times'
Your default icon for unchecked inputs
sameWidth Default: true
set true if the button should have the same width for checked and unchecked label
className Default: 'tart-orange'
You can add your custom css class
input.button-it.CLASS_NAME:checked + label { background-color: #nnn; color: #nnn; }
tart-orange
summer-sky
turquoise
mikado-yellow
spanish-orange
apple-green
artichoke
tart-orange
smoky-black
night-fade
dusty-grass
malibu-beach
premium-white
smart-indigo

You can set messages and icons for each input via data-attributes

data-labels checked label|unchecked label
 <input type="checkbox" data-labels="I'm checked|I'm not checked" id="checkbox" name="newsletter" class="demo">
data-icons checked icon|unchecked icon
 <input type="checkbox" data-icons="fa fa-coffee|fa fa-cloud" id="checkbox" name="newsletter" class="demo">
use | as a separator between checked and unchecked states.
If there is no separator, it will be used for both states the same icon or label