This post is saved as a draft.
#212121
1.theme-checkbox { 2 --toggle-size: 16px; 3 -webkit-appearance: none; 4 -moz-appearance: none; 5 appearance: none; 6 width: 6.25em; 7 height: 3.125em; 8 background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat; 9 background: -o-linear-gradient(left, #efefef 50%, #2a2a2a 50%) no-repeat; 10 background: linear-gradient(to right, #efefef 50%, #2a2a2a 50%) no-repeat; 11 background-size: 205%; 12 background-position: 0; 13 -webkit-transition: 0.4s; 14 -o-transition: 0.4s; 15 transition: 0.4s; 16 border-radius: 99em; 17 position: relative; 18 cursor: pointer; 19 font-size: var(--toggle-size); 20} 21 22.theme-checkbox::before { 23 content: ""; 24 width: 2.25em; 25 height: 2.25em; 26 position: absolute; 27 top: 0.438em; 28 left: 0.438em; 29 background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat; 30 background: -o-linear-gradient(left, #efefef 50%, #2a2a2a 50%) no-repeat; 31 background: linear-gradient(to right, #efefef 50%, #2a2a2a 50%) no-repeat; 32 background-size: 205%; 33 background-position: 100%; 34 border-radius: 50%; 35 -webkit-transition: 0.4s; 36 -o-transition: 0.4s; 37 transition: 0.4s; 38} 39 40.theme-checkbox:checked::before { 41 left: calc(100% - 2.25em - 0.438em); 42 background-position: 0; 43} 44 45.theme-checkbox:checked { 46 background-position: 100%; 47}
Variation of aswitch
Variation of aswitch