<label class="toggle-control">
<input type="checkbox" checked="checked">
<span class="control"></span>
</label>
/* Follow me for more pens like this! */
/*
Note: This demo could have easily been written in vanilla CSS.
The reason I opted into using SCSS, was just so that I could
enable easy customization for you, the viewer.
If you want to use this control in your own project as vanilla CSS;
customize the variables to whatever you'd like, and then click on the
down arrow button in the top right of this CSS editor and then select
"View Compiled CSS".
*/
// Tweak these to change the style of the toggle
$toggle-background-color-on: dodgerblue;
$toggle-background-color-off: darkgray;
$toggle-control-color: white;
$toggle-width: 100px;
$toggle-height: 50px;
$toggle-gutter: 5px;
$toggle-radius: 50%;
$toggle-control-speed: .15s;
$toggle-control-ease: ease-in;
// These are our computed variables
// change at your own risk.
$toggle-radius: $toggle-height / 2;
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
.toggle-control {
display: block;
position: relative;
padding-left: $toggle-width;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
user-select: none;
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
input:checked ~ .control {
background-color: $toggle-background-color-on;
&:after {
left: $toggle-width - $toggle-control-size - $toggle-gutter;
}
}
.control {
position: absolute;
top: 0;
left: 0;
height: $toggle-height;
width: $toggle-width;
border-radius: $toggle-radius;
background-color: $toggle-background-color-off;
transition: background-color $toggle-control-speed $toggle-control-ease;
&:after {
content: "";
position: absolute;
left: $toggle-gutter;
top: $toggle-gutter;
width: $toggle-control-size;
height: $toggle-control-size;
border-radius: $toggle-radius;
background: $toggle-control-color;
transition: left $toggle-control-speed $toggle-control-ease;
}
}
}
/* Center the control */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #222229;
color: white;
}
View Compiled
This Pen doesn't use any external CSS resources.