slide checkbox

In this example below you will see how to do a slide checkbox with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by navupawar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright navupawar ©
  • HTML
  • CSS
  • JavaScript
    <div class="checkbox-group">
  <p>Slide Checkbox</p>
  <div class="checkbox-field field-checkbox">
    <input type="checkbox" value="" class="checkbox-custom" id="checkbox1" name="check" />
    <label for="checkbox1"></label>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/navupawar/slide-checkbox-NRYOEo */
        .checkbox-custom{
        visibility: hidden;
    }
p{
  width: 30%;
        float:left;
        font-weight: 600;
        text-align: right;
        padding-right: 30px;
}
/*custom-checkbox*/
.checkbox-field {
  float:left;    
	width: 50px;
	height: 10px;
	background: #333;
	margin: 20px auto;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	position: relative;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.checkbox-field label {
	display: block;
	width: 16px;
	height: 16px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
	-ms-transition: all .4s ease;
	transition: all .4s ease;
	cursor: pointer;
	position: absolute;
	top: -3px;
	left: -3px;

	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.checkbox-field input[type=checkbox]:checked + label {
	left: 37px;
}


/*Downloaded from https://www.codeseek.co/navupawar/slide-checkbox-NRYOEo */
    

Comments