#e8e8e8
1.switch { 2 --input-focus: #2d8cf0; 3 --font-color: #323232; 4 --font-color-sub: #666; 5 --bg-color: #fff; 6 --bg-color-alt: #666; 7 --main-color: #323232; 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-colorcolor); 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}
Comments
Variations
1 MIT License