Switch by neitt0
#212121
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 8em; 7 height: 4em; 8} 9 10/* Hide default HTML checkbox */ 11.switch input { 12 opacity: 0; 13 width: 0; 14 height: 0; 15} 16 17/* The slider */ 18.slider { 19 position: absolute; 20 cursor: pointer; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 background-color: #ccc; 26 transition: 0.4s; 27} 28 29.slider:before { 30 position: absolute; 31 content: ""; 32 height: 4em; 33 width: 4em; 34 background-color: white; 35 transition: 0.2s; 36 transition-timing-function: cubic-bezier(0.75, 0.02, 0.86, 1.31); 37 transform-origin: bottom right; 38} 39 40.switch input:checked + .slider { 41 background-color: #2196f3; 42} 43 44.switch input:focus + .slider { 45 box-shadow: 0 0 1px #2196f3; 46} 47 48.switch input:checked + .slider:before { 49 transform: translateX(0em) rotate(90deg); 50} 51
192 views
192 views
MIT License