6.7K views
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 1.2em; 7 height: 3.3em; 8} 9 10/* Hide default HTML checkbox */ 11.switch .chk { 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: .4s; 27 border-radius: 5px; 28} 29 30.slider:before { 31 position: absolute; 32 content: ""; 33 height: .5em; 34 width: 2.4em; 35 border-radius: 5px; 36 left: -0.6em; 37 top: 0.2em; 38 background-color: white; 39 box-shadow: 0 6px 7px rgba(0,0,0,0.3); 40 transition: .4s; 41} 42 43.slider:before, .slider:after { 44 content: ""; 45 display: block; 46} 47 48.slider:after { 49 background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%, 50 repeating-linear-gradient(90deg,rgb(255, 255, 255) 0,rgb(255, 255, 255),rgb(255, 255, 255) 20%,rgb(255, 255, 255) 20%,rgb(255, 255, 255) 40%) 0 50% / 50% 100%, 51 radial-gradient(circle at 50% 50%,rgb(255, 255, 255) 25%, transparent 26%); 52 background-repeat: no-repeat; 53 border: 0.25em solid transparent; 54 border-left: 0.4em solid #ffffff; 55 border-right: 0 solid transparent; 56 transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out; 57 transform: translateX(-22.5%) rotate(90deg); 58 transform-origin: 25% 50%; 59 position: relative; 60 top: 0.5em; 61 left: 0.55em; 62 width: 2em; 63 height: 1em; 64 box-sizing: border-box; 65} 66 67.chk:checked + .slider { 68 background-color: limegreen; 69} 70 71.chk:focus + .slider { 72 box-shadow: 0 0 1px limegreen; 73} 74 75.chk:checked + .slider:before { 76 transform: translateY(2.3em); 77} 78 79.chk:checked + .slider:after { 80 transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em); 81}
Praashoo7
Prashant
MIT License