#e8e8e8
1.switch { 2 --button-width: 3.5em; 3 --button-height: 2em; 4 --toggle-diameter: 1.5em; 5 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2); 6 --toggle-shadow-offset: 10px; 7 --toggle-wider: 3em; 8 --color-grey: #cccccc; 9 --color-green: #4296f4; 10} 11 12.slider { 13 display: inline-block; 14 width: var(--button-width); 15 height: var(--button-height); 16 background-color: var(--color-grey); 17 border-radius: calc(var(--button-height) / 2); 18 position: relative; 19 transition: 0.3s all ease-in-out; 20} 21 22.slider::after { 23 content: ""; 24 display: inline-block; 25 width: var(--toggle-diameter); 26 height: var(--toggle-diameter); 27 background-color: #fff; 28 border-radius: calc(var(--toggle-diameter) / 2); 29 position: absolute; 30 top: var(--button-toggle-offset); 31 transform: translateX(var(--button-toggle-offset)); 32 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1); 33 transition: 0.3s all ease-in-out; 34} 35 36.switch input[type="checkbox"]:checked + .slider { 37 background-color: var(--color-green); 38} 39 40.switch input[type="checkbox"]:checked + .slider::after { 41 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset))); 42 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1); 43} 44 45.switch input[type="checkbox"] { 46 display: none; 47} 48 49.switch input[type="checkbox"]:active + .slider::after { 50 width: var(--toggle-wider); 51} 52 53.switch input[type="checkbox"]:checked:active + .slider::after { 54 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset))); 55} 56
Comments
MIT License