Switch by KINGFRESS
#212121
1/* Dark Mode Only ;) */ 2 3/* The switch - the box around the slider */ 4.switch { 5 font-size: 17px; 6 position: relative; 7 display: inline-block; 8 width: 3.5em; 9 height: .5em; 10} 11 12/* Hide default HTML checkbox */ 13.switch input { 14 opacity: 0; 15 width: 0; 16 height: 0; 17} 18 19/* The slider */ 20.slider { 21 position: absolute; 22 cursor: pointer; 23 top: 0; 24 left: 0; 25 right: 0; 26 bottom: 0; 27 background-color: #5B5B5B; 28 transition: .4s; 29 border-radius: 30px; 30 display: flex; 31 align-items: center; 32} 33 34.slider .circle { 35 background-color: #212121; 36 height: 3em; 37 width: 3em; 38 border-radius: 50%; 39 position: absolute; 40 left: 0; 41 transform: translateX(-50%); 42 transition: .4s; 43} 44 45.slider .circle::before { 46 position: absolute; 47 content: ""; 48 height: 2.3em; 49 width: 2.3em; 50 border-radius: 50%; 51 left: 50%; 52 top: 50%; 53 transform: translate(-50%, -50%); 54 background-color: rgb(182, 182, 182); 55 transition: .4s; 56} 57 58.slider .circle::after { 59 content: ''; 60 background-color: #212121; 61 height: 1.7em; 62 width: 1.7em; 63 border-radius: 50%; 64 position: absolute; 65 top: 50%; 66 left: 50%; 67 transform: translate(-50%, -50%); 68 transition: .4s; 69} 70 71input:checked + .slider .circle { 72 transform: translateX(2em); 73 transition: .4s; 74} 75 76input:checked + .slider .circle::before { 77 background-color: #e1e1e1; 78 transition: .4s; 79} 80 81input:checked + .slider .circle::after { 82 width: 0; 83 height: 0; 84 transition: .4s; 85}
5.3K views
5.3K views
MIT License