Switch by Alaner-xs
#212121
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 15px; 4 position: relative; 5 display: inline-block; 6 width: 4.5em; 7 height: 2em; 8} 9 10/* Hide default HTML checkbox */ 11.switch input { 12 background-color: transparent; 13 opacity: 0; 14 width: 0; 15 height: 0; 16} 17 18/* The slider */ 19.slider { 20 position: absolute; 21 cursor: pointer; 22 top: 0; 23 left: 0; 24 right: 0; 25 bottom: 0; 26 background-image: linear-gradient(120deg,#234567,#781223); 27 transition: .4s; 28 border-top-left-radius: 13px; 29 border-bottom-right-radius: 13px; 30} 31 32.slider:before { 33 position: absolute; 34 content: ""; 35 height: 1.4em; 36 width: 1.4em; 37 border-top-left-radius: 11px; 38 border-bottom-right-radius: 11px; 39 left: 0.3em; 40 bottom: 0.3em; 41 background-color: #dde4eb; 42 transition: .4s; 43} 44 45input:checked + .slider { 46 background-color: transparent; 47} 48 49input:checked + .slider:before { 50 transform: translateX(2.5em); 51}
2K views
2K views
MIT License