Switch by simontheonlyone
#212121
1.switch { 2 font-size: 17px; 3 position: relative; 4 display: inline-block; 5 width: 6em; 6 height: 6em; 7} 8 9.switch input { 10 opacity: 0; 11 width: 0; 12 height: 0; 13} 14 15.slider { 16 inset: 0; 17 background-color: #333; 18 border-radius: 30px; 19} 20 21.slider:before { 22 height: 0.8em; 23 width: 1.1em; 24 inset: 44px 28px; 25 background: #eee; 26 border-radius: 4px; 27} 28 29.battery { 30 height: 1.4em; 31 width: 2.9em; 32 inset: 39px 23px; 33 border: 2px solid #eee; 34 border-radius: 8px; 35} 36 37.battery:before { 38 height: 0.4em; 39 width: 0.1em; 40 inset: 0.4em 50px; 41 border: none; 42 border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%; 43 background: #eee; 44} 45 46.switch input:checked + .slider { 47 background-color: #eee; 48 box-shadow: 0 0 1px #eee; 49} 50 51.switch input:checked ~ .battery { 52 border: 2px solid #111; 53} 54 55.switch input:checked ~ .battery:before { 56 background: #111; 57} 58 59.switch input:checked + .slider:before { 60 background: rgb(255, 176, 85); 61 animation: lowbattery 1.6s linear; 62} 63 64@keyframes lowbattery { 65 0% { 66 width: 1.1em; 67 } 68 40% { 69 width: 2.3em; 70 } 71 70% { 72 width: 2.3em; 73 } 74 100% { 75 width: 1.1em; 76 } 77} 78 79.slider, 80.battery, 81.slider:before, 82.battery:before { 83 position: absolute; 84 content: ""; 85 transition: 0.5s; 86} 87
281 views
281 views
Original Creator: Apple
This UI element is reposted from an external origin. Show them some appreciation!
MIT License