#212121
1.switch { 2 --secondary-container: #3a4b39; 3 --primary: #84da89; 4 font-size: 17px; 5 position: relative; 6 display: inline-block; 7 width: 3.7em; 8 height: 1.8em; 9} 10 11.switch input { 12 display: none; 13 opacity: 0; 14 width: 0; 15 height: 0; 16} 17 18.slider { 19 position: absolute; 20 cursor: pointer; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 background-color: #313033; 26 transition: .2s; 27 border-radius: 30px; 28} 29 30.slider:before { 31 position: absolute; 32 content: ""; 33 height: 1.4em; 34 width: 1.4em; 35 border-radius: 20px; 36 left: 0.2em; 37 bottom: 0.2em; 38 background-color: #aeaaae; 39 transition: .4s; 40} 41 42input:checked + .slider::before { 43 background-color: var(--primary); 44} 45 46input:checked + .slider { 47 background-color: var(--secondary-container); 48} 49 50input:focus + .slider { 51 box-shadow: 0 0 1px var(--secondary-container); 52} 53 54input:checked + .slider:before { 55 transform: translateX(1.9em); 56}
Comments
MIT License