CSS
@charset "utf-8";
body {
background: #f39c12;
color: #151515;
font: 100%/1.5em "Lato", sans-serif;
margin: 0;
}
input {
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
.container {
height: 64px;
left: 50%;
margin: -32px 0 0 -80px;
position: absolute;
top: 50%;
width: 160px;
}
.switch {
background: #fff;
border-radius: 32px;
display: block;
height: 64px;
position: relative;
width: 160px;
}
.switch label {
color: #fff;
font-size: 48px;
font-weight: 300;
line-height: 64px;
text-transform: uppercase;
transition: color .2s ease;
width: 100px;
}
.switch label:nth-of-type(1) {
left: -75%;
position: absolute;
text-align: right;
}
.switch label:nth-of-type(2) {
position: absolute;
right: -75%;
text-align: left;
}
.switch input {
height: 64px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 160px;
z-index: 2;
}
.switch input:checked~label:nth-of-type(1) { color: #fff; }
.switch input:checked~label:nth-of-type(2) { color: #333; }
.switch input~:checked~label:nth-of-type(1) { color: #333; }
.switch input~:checked~label:nth-of-type(2) { color: #fff; }
.switch input:checked~.toggle {
left: 4px;
}
.switch input~:checked~.toggle {
left: 100px;
}
.switch input:checked {
z-index: 0;
}
.toggle {
background: #d35400;
border-radius: 50%;
height: 56px;
left: 0;
position: absolute;
top: 4px;
transition: left .2s ease;
width: 56px;
z-index: 1;
}
