Switch by MuhammadHasann
#212121
1.toggle-cont { 2 --primary: #54a8fc; 3 --light: #d9d9d9; 4 --dark: #121212; 5 --gray: #414344; 6 7 position: relative; 8 z-index: 10; 9 10 width: fit-content; 11 height: 50px; 12 13 border-radius: 9999px; 14} 15 16.toggle-cont .toggle-input { 17 display: none; 18} 19 20.toggle-cont .toggle-label { 21 --gap: 5px; 22 --width: 50px; 23 24 cursor: pointer; 25 26 position: relative; 27 display: inline-block; 28 29 padding: 0.5rem; 30 width: calc((var(--width) + var(--gap)) * 2); 31 height: 100%; 32 background-color: var(--dark); 33 34 border: 1px solid #777777; 35 border-bottom: 0; 36 37 border-radius: 9999px; 38 box-sizing: content-box; 39 transition: all 0.3s ease-in-out; 40} 41.toggle-label::before { 42 content: ""; 43 44 position: absolute; 45 z-index: -10; 46 top: 50%; 47 left: 50%; 48 transform: translate(-50%, -50%); 49 50 width: calc(100% + 1.5rem); 51 height: calc(100% + 1.5rem); 52 background-color: var(--gray); 53 54 border: 1px solid #777777; 55 border-bottom: 0; 56 border-radius: 9999px; 57 58 transition: all 0.3s ease-in-out; 59} 60.toggle-label::after { 61 content: ""; 62 63 position: absolute; 64 z-index: -10; 65 top: 50%; 66 left: 50%; 67 transform: translate(-50%, -50%); 68 69 width: 100%; 70 height: 100%; 71 background-image: radial-gradient( 72 circle at 50% -100%, 73 rgb(58, 155, 252) 0%, 74 rgba(12, 12, 12, 1) 80% 75 ); 76 77 border-radius: 9999px; 78} 79 80.toggle-cont .toggle-label .cont-icon { 81 position: relative; 82 83 display: flex; 84 justify-content: center; 85 align-items: center; 86 87 position: relative; 88 width: var(--width); 89 height: 50px; 90 background-image: radial-gradient( 91 circle at 50% 0%, 92 #666666 0%, 93 var(--gray) 100% 94 ); 95 96 border: 1px solid #aaaaaa; 97 border-bottom: 0; 98 border-radius: 9999px; 99 box-shadow: inset 0 -0.15rem 0.15rem var(--primary), 100 inset 0 0 0.5rem 0.75rem var(--second); 101 102 transition: transform 0.3s ease-in-out; 103} 104 105.cont-icon { 106 overflow: clip; 107 position: relative; 108} 109 110.cont-icon .sparkle { 111 position: absolute; 112 top: 50%; 113 left: 50%; 114 115 display: block; 116 117 width: calc(var(--width) * 1px); 118 aspect-ratio: 1; 119 background-color: var(--light); 120 121 border-radius: 50%; 122 transform-origin: 50% 50%; 123 rotate: calc(1deg * var(--deg)); 124 transform: translate(-50%, -50%); 125 animation: sparkle calc(100s / var(--duration)) linear 126 calc(0s / var(--duration)) infinite; 127} 128 129@keyframes sparkle { 130 to { 131 width: calc(var(--width) * 0.5px); 132 transform: translate(2000%, -50%); 133 } 134} 135 136.cont-icon .icon { 137 width: 1.1rem; 138 fill: var(--light); 139} 140 141.toggle-cont:has(.toggle-input:checked) { 142 --checked: true; 143} 144 145@container style(--checked: true) { 146 .toggle-cont .toggle-label { 147 background-color: #41434400; 148 149 border: 1px solid #3d6970; 150 border-bottom: 0; 151 } 152 153 .toggle-cont .toggle-label::before { 154 box-shadow: 0 1rem 2.5rem -2rem #0080ff; 155 } 156 157 .toggle-cont .toggle-label .cont-icon { 158 overflow: visible; 159 160 background-image: radial-gradient( 161 circle at 50% 0%, 162 #045ab1 0%, 163 var(--primary) 100% 164 ); 165 166 border: 1px solid var(--primary); 167 border-bottom: 0; 168 169 transform: translateX(calc((var(--gap) * 2) + 100%)) rotate(-225deg); 170 } 171 172 .toggle-cont .toggle-label .cont-icon .sparkle { 173 z-index: -10; 174 175 width: calc(var(--width) * 1.5px); 176 background-color: #acacac; 177 178 animation: sparkle calc(100s / var(--duration)) linear 179 calc(10s / var(--duration)) infinite; 180 } 181 182 @keyframes sparkle { 183 to { 184 width: calc(var(--width) * 1px); 185 transform: translate(5000%, -50%); 186 } 187 } 188} 189
368 views
368 views
MIT License