Title: Cool Slider Checkbox Post by: admin on February 15, 2017, 05:34: PM Change the name .agree_terms to what ever your checkbox field name is
/* CSS .agree_terms */ .agree_terms { width: 90px; height: 26px; background: #333; margin: 20px auto; position: relative; border-radius: 50px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); } .agree_terms:after { content: 'NO'; color: #F6F8F6; position: absolute; right: 15px; z-index: 0; font: 12px/26px Arial, sans-serif; font-weight: bold; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15); } .agree_terms:before { content: 'Agree'; color: #4FF453; position: absolute; left: 5px; z-index: 0; font: 12px/24px Arial, sans-serif; font-weight: bold; } .agree_terms label { content: 'Click'; display: block; width: 40px; height: 10px; cursor: pointer; position: absolute; top: 3px; left: 3px; z-index: 1; background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 50px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); color: rgba(0,0,0,1.00); } .agree_terms input[type=checkbox] { visibility: hidden; } .agree_terms input[type=checkbox]:checked + label { left: 43px; } /* end .agree_terms CSS */ <!-- .agree_terms HTML --> <section title=".agree_terms"> <!-- .agree_terms --> <div class="agree_terms"> <input type="checkbox" value="1" id="agree_terms" form="form1" name="check" checked /> <label for="agree_terms"></label> </div> <!-- end .agree_terms --> </section> <!-- end .agree_terms HTML --> found at https://codepen.io/bbodine1/pen/novBm |