#e8e8e8
1.checkbox-wrapper-25 input[type="checkbox"] { 2 background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), 3 -webkit-linear-gradient(left, #f66 50%, #6cf 50%); 4 background-size: 100% 100%, 200% 100%; 5 background-position: 0 0, 15px 0; 6 border-radius: 25px; 7 box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5), 8 inset 0 0 10px hsla(0,0%,0%,.5), 9 0 0 0 1px hsla(0,0%,0%,.1), 10 0 -1px 2px 2px hsla(0,0%,0%,.25), 11 0 2px 2px 2px hsla(0,0%,100%,.75); 12 cursor: pointer; 13 height: 25px; 14 padding-right: 25px; 15 width: 75px; 16 -webkit-appearance: none; 17 -webkit-transition: .25s; 18} 19 20.checkbox-wrapper-25 input[type="checkbox"]:after { 21 background-color: #eee; 22 background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1)); 23 border-radius: 25px; 24 box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1), 25 inset 0 -1px 1px 1px hsla(0,0%,0%,.25), 26 0 1px 3px 1px hsla(0,0%,0%,.5), 27 0 0 2px hsla(0,0%,0%,.25); 28 content: ''; 29 display: block; 30 height: 25px; 31 width: 50px; 32} 33 34.checkbox-wrapper-25 input[type="checkbox"]:checked { 35 background-position: 0 0, 35px 0; 36 padding-left: 25px; 37 padding-right: 0; 38}
3.8K views
3.8K views
Comments
MIT License