Switch by csemszepp
#212121
1.togglesw { 2 --s: 50px; 3 /* adjust this to control the size*/ 4 height: calc(var(--s) + var(--s)/5); 5 width: auto; 6 /* some browsers need this */ 7 aspect-ratio: 2.25; 8 border-radius: var(--s); 9 margin: calc(var(--s)/2); 10 display: grid; 11 cursor: pointer; 12 background-color: #ff7a7a; 13 box-sizing: content-box; 14 overflow: hidden; 15 transition: .3s .1s; 16 -webkit-appearance: none; 17 -moz-appearance: none; 18 appearance: none; 19} 20 21.togglesw:before { 22 content: ""; 23 padding: calc(var(--s)/10); 24 --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%,#000 96%,#0000); 25 background: var(--_g) 0 /var(--_p,var(--s)) 100% no-repeat content-box, 26 var(--_g) var(--_p,0)/var(--s) 100% no-repeat content-box, 27 #fff; 28 mix-blend-mode: darken; 29 filter: blur(calc(var(--s)/12)) contrast(11); 30 transition: .4s, background-position .4s .1s, 31 padding cubic-bezier(0,calc(var(--_i,-1)*200),1,calc(var(--_i,-1)*200)) .25s .1s; 32} 33 34.togglesw:checked { 35 background-color: #85ff7a; 36} 37 38.togglesw:checked:before { 39 padding: calc(var(--s)/10 + .05px) calc(var(--s)/10); 40 --_p: 100%; 41 --_i: 1; 42}
547 views
547 views
MIT License