<label class="toggle">
<input type="checkbox" /><div></div>
</label>
body {
font-size: 32px;
background-color: #222;
}
.toggle {
position: fixed;
top: 50%;
left: 50%;
transform:
translateX(-50%)
translateY(-50%);
width: 1.6em;
height: 1em;
border-radius: .5em;
overflow: hidden;
cursor: pointer;
filter:
contrast(20)
hue-rotate(150deg)
saturate(4);
box-shadow:
0 0 0 2px #fff,
0 0 1em 0 #000;
input {
display: none;
}
div {
background: #444;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transition: all .4s ease-in-out;
}
input:checked ~ div {
background: #f00;
}
div:before,
div:after {
content: '';
position: absolute;
width: .8em;
height: .8em;
background: #fff;
border-radius: 100%;
top: .5em;
left: .5em;
transition: transform .4s ease-in-out;
transform:
translateX(-50%)
translateY(-50%)
scale(.4);
filter: blur(.1em);
}
div:before {
background: #999;
transition-delay: .13s;
}
input:checked + div:before,
input:checked + div:after {
transform:
translateX(20%)
translateY(-50%);
}
}
Also see: Tab Triggers