Switch by csemszepp
#e8e8e8
1.container { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 --hue: 220deg; 6 --width: 15rem; 7 --accent-hue: 22deg; 8 --duration: 0.6s; 9 --easing: cubic-bezier(1, 0, 1, 1); 10} 11 12.togglesw { 13 display: none; 14} 15 16.switch { 17 --shadow-offset: calc(var(--width) / 20); 18 position: relative; 19 cursor: pointer; 20 display: flex; 21 align-items: center; 22 width: var(--width); 23 height: calc(var(--width) / 2.5); 24 border-radius: var(--width); 25 box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%), 26 inset -10px -10px 10px hsl(var(--hue) 20% 93%); 27} 28 29.indicator { 30 content: ''; 31 position: absolute; 32 width: 40%; 33 height: 60%; 34 transition: all var(--duration) var(--easing); 35 box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%), 36 inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%), 37 inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%); 38} 39 40.indicator.left { 41 --hue: var(--accent-hue); 42 overflow: hidden; 43 left: 10%; 44 border-radius: 100px 0 0 100px; 45 background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%)); 46} 47 48.indicator.left::after { 49 content: ''; 50 position: absolute; 51 opacity: 0.6; 52 width: 100%; 53 height: 100%; 54} 55 56.indicator.right { 57 right: 10%; 58 border-radius: 0 100px 100px 0; 59 background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%)); 60} 61 62.button { 63 position: absolute; 64 z-index: 1; 65 width: 55%; 66 height: 80%; 67 left: 5%; 68 border-radius: 100px; 69 background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%); 70 transition: all var(--duration) var(--easing); 71 box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%), 72 2px 2px 6px hsl(var(--hue) 18% 50% / 40%), 73 10px 20px 10px hsl(var(--hue) 18% 50% / 40%), 74 20px 30px 30px hsl(var(--hue) 18% 50% / 60%); 75} 76 77.button::before, 78.button::after { 79 content: ''; 80 position: absolute; 81 top: 10%; 82 width: 41%; 83 height: 80%; 84 border-radius: 100%; 85} 86 87.button::before { 88 left: 5%; 89 box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%); 90 background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%); 91} 92 93.button::after { 94 right: 5%; 95 box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%); 96 background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%); 97} 98 99.togglesw:checked ~ .button { 100 left: 40%; 101} 102 103.togglesw:not(:checked) ~ .indicator.left, 104.togglesw:checked ~ .indicator.right { 105 box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%), 106 inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%), 107 inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%); 108}
7.4K views
7.4K views
MIT License