<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.