Switch by Charly-T
#e8e8e8
1.switch { 2 --switch-width: 3.5em; 3 --switch-height: calc(var(--switch-width) / 2); 4 --left-ball-color: black; 5 --right-ball-color: white; 6 width: var(--switch-width); 7 height: var(--switch-height); 8 border-radius: calc(var(--switch-height) / 2); 9 background-color: var(--left-ball-color); 10 position: relative; 11 overflow: hidden; 12} 13 14.switch input[type="checkbox"] { 15 width: 100%; 16 position: absolute; 17 height: 100%; 18 margin: 0; 19 opacity: 0; 20} 21 22.switch .left { 23 position: absolute; 24 width: calc(var(--switch-width) / 3); 25 height: calc(var(--switch-height) / 1.5); 26 background-color: var(--left-ball-color); 27 border-radius: 50%; 28 left: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2); 29 top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2); 30 z-index: 2; 31 pointer-events: none; 32} 33 34.switch .right { 35 position: absolute; 36 width: calc(var(--switch-width) / 3); 37 height: calc(var(--switch-height) / 1.5); 38 background-color: var(--right-ball-color); 39 border-radius: 50%; 40 right: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2); 41 top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2); 42 z-index: 2; 43 pointer-events: none; 44} 45 46.switch .switcher { 47 position: absolute; 48 width: calc(100% + var(--switch-width) / 3); 49 height: 100%; 50 background-color: var(--right-ball-color); 51 z-index: 1; 52 left: calc(-50% + var(--switch-width) / (3 * 2)); 53 pointer-events: none; 54 transition: left 500ms ease; 55 border-top-left-radius: calc(var(--switch-width) / 3); 56 border-bottom-left-radius: calc(var(--switch-width) / 3); 57} 58 59.switch .switcher:before { 60 position: absolute; 61 content: ''; 62 width: calc(var(--switch-width) / 3); 63 height: 100%; 64 background-color: var(--left-ball-color); 65 display: block; 66 border-bottom-right-radius: 50%; 67 border-top-right-radius: 50%; 68 z-index: 2; 69} 70 71.switch .switcher:after { 72 position: absolute; 73 content: ''; 74 width: calc(var(--switch-width) / 3); 75 height: 100%; 76 background-color: var(--right-ball-color); 77 display: block; 78 border-bottom-left-radius: 50%; 79 border-top-left-radius: 50%; 80} 81 82.switch input:checked ~ .switcher { 83 left: 100%; 84} 85 86.switch input:checked ~ .switcher:before { 87 display: none; 88}
1.4K views
1.4K views
MIT License