Created
June 1, 2012 13:03
-
-
Save grtner/2852000 to your computer and use it in GitHub Desktop.
Pure CSS Slide Toggle by joshnh
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Pure CSS Slide Toggle by joshnh | |
*/ | |
html { | |
background-color: #e4ded4; | |
background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
box-shadow: inset 0 0 100px hsla(0,0%,0%,.1); | |
height: 100%; | |
} | |
input[type="checkbox"] { | |
background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), | |
-webkit-linear-gradient(left, #f66 50%, #6cf 50%); | |
background-size: 100% 100%, 200% 100%; | |
background-position: 0 0, 15px 0; | |
border-radius: 25px; | |
box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5), | |
inset 0 0 10px hsla(0,0%,0%,.5), | |
0 0 0 1px hsla(0,0%,0%,.1), | |
0 -1px 2px 2px hsla(0,0%,0%,.25), | |
0 2px 2px 2px hsla(0,0%,100%,.75); | |
cursor: pointer; | |
height: 25px; | |
left: 50%; | |
margin: -12px -37px; | |
padding-right: 25px; | |
position: absolute; | |
top: 50%; | |
width: 75px; | |
-webkit-appearance: none; | |
-webkit-transition: .25s; | |
} | |
input[type="checkbox"]:after { | |
background-color: #eee; | |
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1)); | |
border-radius: 25px; | |
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1), | |
inset 0 -1px 1px 1px hsla(0,0%,0%,.25), | |
0 1px 3px 1px hsla(0,0%,0%,.5), | |
0 0 2px hsla(0,0%,0%,.25); | |
content: ''; | |
display: block; | |
height: 25px; | |
left: 0; | |
position: relative; | |
top: 0; | |
width: 50px; | |
} | |
input[type="checkbox"]:checked { | |
background-position: 0 0, 35px 0; | |
padding-left: 25px; | |
padding-right: 0; | |
} | |
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- content to be placed inside <body>…</body> --> | |
<input type="checkbox"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment