Switch by AmIt-DasIT
#212121
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 position: absolute; 20 cursor: pointer; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 background-color: #223243; 26 transition: .4s; 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.3em; 37 bottom: 0.3em; 38 background-color: #223243; 39 box-shadow: inset 2px -2px 0 1.8px #fff; 40 transition: .4s; 41 animation: anima1 0.3s linear; 42} 43 44@keyframes anima1 { 45 0% { 46 transform: translateX(1.5em); 47 } 48 49 80% { 50 transform: translateX(-0.3em); 51 } 52 53 100% { 54 transform: translateX(0em); 55 } 56} 57 58.switch input:checked + .slider:before { 59 background-color: yellow; 60 box-shadow: none; 61 transform: translateX(1.5em); 62 animation: anima 0.3s linear; 63} 64 65@keyframes anima { 66 0% { 67 transform: translateX(0px) 68 } 69 70 80% { 71 transform: translateX(1.6em) 72 } 73 74 100% { 75 transform: translateX(1.4em) 76 } 77}
1.5K views
1.5K views
MIT License