#e8e8e8
1.switch { 2 --input-focus: #2d8cf0; 3 --bg-color: #fff; 4 --bg-color-alt: #666; 5 --main-color: #323232; 6 --input-out-of-focus: #ccc; 7 position: relative; 8 display: flex; 9 flex-direction: column; 10 justify-content: center; 11 align-items: center; 12 gap: 30px; 13 width: 70px; 14 height: 36px; 15 transform: translateX(calc(50% - 10px)); 16} 17 18.toggle { 19 opacity: 0; 20} 21 22.slider { 23 box-sizing: border-box; 24 border-radius: 100px; 25 border: 2px solid var(--main-color); 26 box-shadow: 4px 4px var(--main-color); 27 position: absolute; 28 cursor: pointer; 29 top: 0; 30 left: 0; 31 right: 0; 32 bottom: 0; 33 background-color: var(--input-out-of-focus); 34 transition: 0.3s; 35} 36 37.slider:before { 38 content: "off"; 39 box-sizing: border-box; 40 height: 30px; 41 width: 30px; 42 position: absolute; 43 left: 2px; 44 bottom: 1px; 45 border: 2px solid var(--main-color); 46 border-radius: 100px; 47 background-color: var(--bg-color); 48 color: var(--main-color); 49 font-size: 14px; 50 font-weight: 600; 51 text-align: center; 52 line-height: 25px; 53 transition: 0.3s; 54} 55 56.toggle:checked + .slider { 57 background-color: var(--input-focus); 58 transform: translateX(-32px); 59} 60 61.toggle:checked + .slider:before { 62 content: "on"; 63 transform: translateX(32px); 64}
Comments
Variations
1 MIT License