<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="container"> <div class="row"> <div class="pd-tb-20"> <div class="pd-b-20"> <input type="radio" name="radiog_dark" id="radio4" class=" css-checkbox " /> <label for="radio4" class="css-label"> Press me <h5>On</h5> </label> </div> <div class="pd-b-20"> <input type="radio" name="radiog_dark" id="radio5" class="css-checkbox " checked="checked" /> <label for="radio5" class="css-label"> Press me <h5>Off</h5> </label> </div> </div> </div> </div>

.pd-tb-20 { padding: 40px 20px; } .pd-b-20{ padding:30px; } input[type=radio].css-checkbox { position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; background-repeat:no-repeat; } input[type=radio].css-checkbox + label.css-label { padding-left:42px; height:30px; display:inline-block; line-height:19px; background-repeat:no-repeat; background-position: 0 0; font-size:20px; vertical-align:middle; cursor:pointer; font-family: 'Fira Sans', sans-serif; font-weight: 500; } input[type=radio].css-checkbox:checked + label.css-label { background-position: 0 -35px; } label.css-label { background-image:url( https://lh4.googleusercontent.com/T6GRS9rNw0YuuTCaRGUTYz_MTrpqP-uBHvODx6LHBoh4cYb4-11X5I2tE42nZZOttFqol_8p=w1406-h912); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }