Switch by KshitijAdhikaree
#e8e8e8
1/* The switch - the box around the slider */ 2.switch-container { 3 position: relative; 4 display: inline-block; 5 width: 3.5em; 6 height: 2em; 7} 8 9/* Hide default HTML checkbox */ 10.switch-container input { 11 opacity: 0; 12 width: 0; 13 height: 0; 14} 15 16/* The slider */ 17.switch-container .slider { 18 --background: linear-gradient(to right, #090613ef, #18151f); 19 position: absolute; 20 cursor: pointer; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 background: var(--background); 26 transition: background-color 0.5s; 27 border-radius: 30px; 28} 29 30.switch-container .slider:before { 31 position: absolute; 32 content: ""; 33 height: 1.4em; 34 width: 1.4em; 35 border-radius: 50%; 36 left: 10%; 37 bottom: 15%; 38 box-shadow: inset 15px -4px 0px 15px #f8ea27; 39 background: var(--background); 40 transition: transform 0.5s, box-shadow 0.5s; 41} 42 43.switch-container input:checked + .slider { 44 background-color: #000; 45} 46 47.switch-container input:checked + .slider:before { 48 transform: translateX(100%); 49 box-shadow: inset 8px -4px 0px 0px #f8f8f4; 50} 51
943 views
943 views
MIT License