<section class="form">
<label class="switch">
<input type="checkbox">
<span class="slide"></span>
</label>
</section>
html,
body {
height: 100%;
background: #D8DBE2;
}
.form {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.switch {
width: 10rem;
height: .5rem;
position: relative;
display: block;
input[type='checkbox'] {
display: none;
&:checked + .slide {
background: #37505c;
&::before {
background: #35CE8D;
transform: translate(110%, -50%);
}
}
&:focus + .slide {
box-shadow: 0 0 .1rem red;
}
}
.slide {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 5rem;
background: #e7ecef;
border: 2px solid #37505c;
transition: .5s;
border-radius: 10rem;
&::before {
position: absolute;
content: '';
height: 4rem;
width: 4rem;
top: 50%;
left: .5rem;
background: #FF1654;
transition: .5s;
border-radius: 100%;
transform: translateY(-50%);
border: 2px solid #fff;
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.