230 views
1.switch { 2 font-size: 17px; 3 position: relative; 4 display: inline-block; 5 width: 3.5em; 6 height: 2em; 7 margin-right: 12px; 8} 9 10.switch input { 11 opacity: 0; 12 width: 0; 13 height: 0; 14} 15 16.slider { 17 position: absolute; 18 cursor: pointer; 19 top: 0; 20 left: 0; 21 right: 0; 22 bottom: 0; 23 background-color: #ccc; 24 -webkit-transition: .4s; 25 transition: .4s; 26 box-shadow: inset 2px 2px 12px -5px gray; 27} 28 29.slider:before { 30 position: absolute; 31 content: ""; 32 height: 2em; 33 width: 1.75em; 34 left: 0; 35 bottom: 0; 36 background-color: white; 37 -webkit-transition: .4s; 38 transition: .4s; 39} 40 41.slider-input:checked + .slider { 42 background-color: #90EE90; 43 box-shadow: inset 2px 2px 9px -5px gray; 44} 45 46.slider-input:focus + .slider { 47 box-shadow: 0 0 1px #90EE90; 48} 49 50.slider-input:checked + .slider:before { 51 -webkit-transform: translateX(1.75em); 52 -ms-transform: translateX(1.75em); 53 transform: translateX(1.75em); 54}
MIT License