<h3>Soft Toggle switch</h3>
<input type='checkbox' id='heat'/>
<label for='heat'>Turn the heat on</label>
$track-w: 6em;
$track-h: 2.625em;
$track-b: .3125em;
$thumb-w: .5*($track-w - 2*$track-b);
$thumb-h: $track-h - 2*$track-b;
$thumb-b: 3px;
$c: rgba(#777, .04);
$list: $c 0, $c 2px, transparent 0, transparent 5px;
*, :before, :after { box-sizing: border-box }
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background: linear-gradient(#edecea, #d8d7d1)
} h3 { font: 700 3em nanum brush script, cursive }
input {
position: absolute; left: -100vw;
&:checked + label { --s: 1 }
}
label { --s: 0;
display: block;
position: relative;
--c: #5ff2e6;
text-indent: -100vw;
filter: blur(.5px);cursor: pointer;
&, &:before {
border: solid $track-b transparent;
width: $track-w; height: $track-h;
border-radius: .5*$track-h;
box-shadow: inset 0 .125em .75em rgba(#000, .5);
background: repeating-linear-gradient(-45deg, $list) padding-box, repeating-linear-gradient(45deg, $list) padding-box,
linear-gradient(transparent, rgba(#000, .32)) padding-box, linear-gradient(var(--c), var(--c)) padding-box, linear-gradient(#bebebb, #fdfdfc) border-box
}
&:before, &:after { position: absolute;
top: 0; left: 0;
content: ''
}
&:before { margin: -$track-b;
opacity: calc(1 - var(--s));
--c: #f89183;
transition: .2s opacity;
}
&:after {
border: solid $thumb-b transparent;
width: $thumb-w; height: $thumb-h;
border-radius: .5*$thumb-h;
transform: translate(calc(var(--s)*100%));
box-shadow: 0 2px 9px rgba(#000, .8);
background: linear-gradient(#d1d1d1, #edede9) padding-box, linear-gradient(#fcfcfc, #b2b2b2) border-box;
transition: .2s transform ease-in;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.