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