Skip to content

Instantly share code, notes, and snippets.

@TobiasFeld22
Last active October 13, 2017 13:22
Show Gist options
  • Save TobiasFeld22/d8d3ea6edfa83a335ceb4ddbe2782b56 to your computer and use it in GitHub Desktop.
Save TobiasFeld22/d8d3ea6edfa83a335ceb4ddbe2782b56 to your computer and use it in GitHub Desktop.
input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 35px;
height: 20px;
background: grey;
display: block;
border-radius: 100px;
position: relative;
}
label:after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
}
input:checked + label {
background: #49D661;
}
input:checked + label:after {
left: calc(100% - 5px);
transform: translateX(-100%);
}
label:active:after {
width: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment