Switch by andrew-demchenk0
#212121
1.switch { 2 --input-focus: #2d8cf0; 3 --font-color: #fefefe; 4 --font-color-sub: #7e7e7e; 5 --bg-color: #111; 6 --bg-color-alt: #7e7e7e; 7 --main-color: #fefefe; 8 position: relative; 9 display: flex; 10 flex-direction: column; 11 justify-content: center; 12 align-items: center; 13 gap: 30px; 14 width: 50px; 15 height: 20px; 16} 17 18.toggle { 19 opacity: 0; 20 width: 0; 21 height: 0; 22} 23 24.slider { 25 box-sizing: border-box; 26 border-radius: 5px; 27 border: 2px solid var(--main-color); 28 box-shadow: 4px 4px var(--main-color); 29 position: absolute; 30 cursor: pointer; 31 top: 0; 32 left: 0; 33 right: 0; 34 bottom: 0; 35 background-color: var(--bg-color); 36 transition: 0.3s; 37} 38 39.slider:before { 40 box-sizing: border-box; 41 position: absolute; 42 content: ""; 43 height: 20px; 44 width: 20px; 45 border: 2px solid var(--main-color); 46 border-radius: 5px; 47 left: -2px; 48 bottom: 2px; 49 background-color: var(--bg-color); 50 box-shadow: 0 3px 0 var(--main-color); 51 transition: 0.3s; 52} 53 54.toggle:checked + .slider { 55 background-color: var(--input-focus); 56} 57 58.toggle:checked + .slider:before { 59 transform: translateX(30px); 60}
856 views
Variation of aswitch
MIT License