<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-10"> <div class="col-md-4"> <h4>Radio Buttons</h4> <div class="funkyradio"> <div class="funkyradio-default"> <input type="radio" name="radio" id="radio1" /> <label for="radio1">First Option default</label> </div> <div class="funkyradio-primary"> <input type="radio" name="radio" id="radio2" checked/> <label for="radio2">Second Option primary</label> </div> <div class="funkyradio-success"> <input type="radio" name="radio" id="radio3" /> <label for="radio3">Third Option success</label> </div> <div class="funkyradio-danger"> <input type="radio" name="radio" id="radio4" /> <label for="radio4">Fourth Option danger</label> </div> <div class="funkyradio-warning"> <input type="radio" name="radio" id="radio5" /> <label for="radio5">Fifth Option warning</label> </div> <div class="funkyradio-info"> <input type="radio" name="radio" id="radio6" /> <label for="radio6">Sixth Option info</label> </div> </div> </div> <div class="col-md-4"> <h4>Checkbox Buttons</h4> <div class="funkyradio"> <div class="funkyradio-default"> <input type="checkbox" name="checkbox" id="checkbox1" checked/> <label for="checkbox1">First Option default</label> </div> <div class="funkyradio-primary"> <input type="checkbox" name="checkbox" id="checkbox2" checked/> <label for="checkbox2">Second Option primary</label> </div> <div class="funkyradio-success"> <input type="checkbox" name="checkbox" id="checkbox3" checked/> <label for="checkbox3">Third Option success</label> </div> <div class="funkyradio-danger"> <input type="checkbox" name="checkbox" id="checkbox4" checked/> <label for="checkbox4">Fourth Option danger</label> </div> <div class="funkyradio-warning"> <input type="checkbox" name="checkbox" id="checkbox5" checked/> <label for="checkbox5">Fifth Option warning</label> </div> <div class="funkyradio-info"> <input type="checkbox" name="checkbox" id="checkbox6" checked/> <label for="checkbox6">Sixth Option info</label> </div> </div> </div> <div class="col-md-4"> <h4>Small Checkbox Buttons</h4> <div class="funkyradio funkyradio-sm"> <div class="funkyradio-default"> <input type="checkbox" name="checkbox" id="checkboxsm1" checked/> <label for="checkboxsm1">First Option default</label> </div> <div class="funkyradio-primary"> <input type="checkbox" name="checkbox" id="checkboxsm2" checked/> <label for="checkboxsm2">Second Option primary</label> </div> <div class="funkyradio-success"> <input type="checkbox" name="checkbox" id="checkboxsm3" checked/> <label for="checkboxsm3">Third Option success</label> </div> <div class="funkyradio-danger"> <input type="checkbox" name="checkbox" id="checkboxsm4" checked/> <label for="checkboxsm4">Fourth Option danger</label> </div> <div class="funkyradio-warning"> <input type="checkbox" name="checkbox" id="checkboxsm5" checked/> <label for="checkboxsm5">Fifth Option warning</label> </div> <div class="funkyradio-info"> <input type="checkbox" name="checkbox" id="checkboxsm6" checked/> <label for="checkboxsm6">Sixth Option info</label> </div> </div> </div> </div>

@import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css') .funkyradio div { clear: both; overflow: hidden; } .funkyradio label { width: 100%; border-radius: 3px; border: 1px solid #D1D3D4; font-weight: normal; } .funkyradio input[type="radio"]:empty, .funkyradio input[type="checkbox"]:empty { display: none; } .funkyradio input[type="radio"]:empty ~ label, .funkyradio input[type="checkbox"]:empty ~ label { position: relative; line-height: 2.5em; text-indent: 3.25em; margin-top: 2em; cursor: pointer; user-select: none; } .funkyradio input[type="radio"]:empty ~ label:before, .funkyradio input[type="checkbox"]:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ''; width: 2.5em; background: #D1D3D4; border-radius: 3px 0 0 3px; } .funkyradio input[type="radio"]:hover:not(:checked) ~ label, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label { color: #888; } .funkyradio input[type="radio"]:hover:not(:checked) ~ label:before, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before { content: '\2714'; text-indent: .9em; color: #C2C2C2; } .funkyradio input[type="radio"]:checked ~ label, .funkyradio input[type="checkbox"]:checked ~ label { color: #777; } .funkyradio input[type="radio"]:checked ~ label:before, .funkyradio input[type="checkbox"]:checked ~ label:before { content: '\2714'; text-indent: .9em; color: #333; background-color: #ccc; } .funkyradio input[type="radio"]:focus ~ label:before, .funkyradio input[type="checkbox"]:focus ~ label:before { box-shadow: 0 0 0 3px #999; } .funkyradio-default input[type="radio"]:checked ~ label:before, .funkyradio-default input[type="checkbox"]:checked ~ label:before { color: #333; background-color: #ccc; } .funkyradio-primary input[type="radio"]:checked ~ label:before, .funkyradio-primary input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #337ab7; } .funkyradio-success input[type="radio"]:checked ~ label:before, .funkyradio-success input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #5cb85c; } .funkyradio-danger input[type="radio"]:checked ~ label:before, .funkyradio-danger input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #d9534f; } .funkyradio-warning input[type="radio"]:checked ~ label:before, .funkyradio-warning input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #f0ad4e; } .funkyradio-info input[type="radio"]:checked ~ label:before, .funkyradio-info input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #5bc0de; } .funkyradio-sm input[type="radio"]:empty ~ label, .funkyradio-sm input[type="checkbox"]:empty ~ label { line-height: 1em; text-indent: 2em; margin-top: .5em; } .funkyradio-sm input[type="radio"]:empty ~ label:before, .funkyradio-sm input[type="checkbox"]:empty ~ label:before { width: 1em; } .funkyradio-sm input[type="radio"]:hover:not(:checked) ~ label:before, .funkyradio-sm input[type="checkbox"]:hover:not(:checked) ~ label:before { text-indent: .1em; } .funkyradio-sm input[type="radio"]:checked ~ label:before, .funkyradio-sm input[type="checkbox"]:checked ~ label:before { text-indent: .1em; }