8.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: 3.5em; 7 height: 2em; 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 --background: #28096b; 20 position: absolute; 21 cursor: pointer; 22 top: 0; 23 left: 0; 24 right: 0; 25 bottom: 0; 26 background-color: var(--background); 27 transition: .5s; 28 border-radius: 30px; 29} 30 31.slider:before { 32 position: absolute; 33 content: ""; 34 height: 1.4em; 35 width: 1.4em; 36 border-radius: 50%; 37 left: 10%; 38 bottom: 15%; 39 box-shadow: inset 8px -4px 0px 0px #fff000; 40 background: var(--background); 41 transition: .5s; 42} 43 44input:checked + .slider { 45 background-color: #522ba7; 46} 47 48input:checked + .slider:before { 49 transform: translateX(100%); 50 box-shadow: inset 15px -4px 0px 15px #fff000; 51}
MIT License