Skip to content

Instantly share code, notes, and snippets.

@radi-cho
Created April 7, 2017 18:13
Show Gist options
  • Save radi-cho/4da4bf471539cd4781ec742f414be599 to your computer and use it in GitHub Desktop.
Save radi-cho/4da4bf471539cd4781ec742f414be599 to your computer and use it in GitHub Desktop.
.switch input:checked+span {
background-color: #5d9cec;
border-color: #5d9cec;
transition: all .5s;
}
.switch.switch-lg span {
width: 50px;
height: 25px;
}
.switch span {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
transition: all .5s;
box-shadow: 1px 2px 3px rgba(0,0,0,.1) inset;
vertical-align: middle;
}
.switch * {
cursor: pointer;
}
.switch span:after {
content: "";
position: absolute;
background-color: #fff;
top: 0;
left: 0;
height: 18px;
width: 18px;
border: 1px solid #ddd;
border-radius: 400px;
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
-webkit-transition: all .2s;
}
.switch input {
opacity: 0;
position: absolute;
z-index: -1;
}
.switch input:checked+span:after {
left: 50%;
transition: all .2s;
}
.switch.switch-lg span:after {
height: 23px;
width: 23px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment