<label for="checkbox">
<input type="checkbox" class="toggle-checkbox" id="checkbox">
<div class="toggle">
<div class="toggle-pill"></div>
</div>
</label>
.toggle-checkbox + .toggle {
display: block;
width: 30px;
height: 16px;
background: #B7BABF;
border-radius: 26px;
opacity: 1;
padding: 2px;
box-sizing: border-box;
margin: auto;
display: flex;
transition: background 0.5s ease;
.toggle-pill {
display: block;
width: 12px;
height: 12px;
background: white;
border-radius: 10px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
margin-left: 0;
transition: margin 0.08s cubic-bezier(0.77, 0.49, 1, 1);
}
}
.toggle-checkbox:checked + .toggle {
background: #4079F5;
transition: background 0.5s ease;
.toggle-pill {
margin-left: calc(100% - 12px);
}
}
.toggle-checkbox:focus + .toggle {
background: #7da6ff;
}
// unrelated stuff
html, body {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
body {
display: flex;
}
label {
background: rgba(222, 222, 222, 0.2);
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-self: center;
justify-items: center;
text-align: center;
margin: auto;
box-sizing: border-box;
}
.toggle-checkbox + .toggle {
transform: scale(2)
}
.toggle-checkbox {
// visually hidden but accessible
// credit: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px
}
View Compiled
// ¯\_(ツ)_/¯
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.