1<div class="toggle-container">
 2  <div class="toggle-wrap">
 3    <input class="toggle-input" id="holo-toggle" type="checkbox" />
 4    <label class="toggle-track" for="holo-toggle">
 5      <div class="track-lines">
 6        <div class="track-line"></div>
 7      </div>
 8 
 9      <div class="toggle-thumb">
10        <div class="thumb-core"></div>
11        <div class="thumb-inner"></div>
12        <div class="thumb-scan"></div>
13        <div class="thumb-particles">
14          <div class="thumb-particle"></div>
15          <div class="thumb-particle"></div>
16          <div class="thumb-particle"></div>
17          <div class="thumb-particle"></div>
18          <div class="thumb-particle"></div>
19        </div>
20      </div>
21 
22      <div class="toggle-data">
23        <div class="data-text off">OFF</div>
24        <div class="data-text on">ON</div>
25        <div class="status-indicator off"></div>
26        <div class="status-indicator on"></div>
27      </div>
28 
29      <div class="energy-rings">
30        <div class="energy-ring"></div>
31        <div class="energy-ring"></div>
32        <div class="energy-ring"></div>
33      </div>
34 
35      <div class="interface-lines">
36        <div class="interface-line"></div>
37        <div class="interface-line"></div>
38        <div class="interface-line"></div>
39        <div class="interface-line"></div>
40        <div class="interface-line"></div>
41        <div class="interface-line"></div>
42      </div>
43 
44      <div class="toggle-reflection"></div>
45      <div class="holo-glow"></div>
46    </label>
47  </div>
48</div>          

  1.toggle-container {
  2  position: relative;
  3  width: 150px;
  4  display: flex;
  5  flex-direction: column;
  6  align-items: center;
  7  perspective: 800px;
  8  z-index: 5;
  9}
 10 
 11.toggle-wrap {
 12  position: relative;
 13  width: 100%;
 14  height: 60px;
 15  transform-style: preserve-3d;
 16}
 17 
 18.toggle-input {
 19  position: absolute;
 20  opacity: 0;
 21  width: 0;
 22  height: 0;
 23}
 24 
 25.toggle-track {
 26  position: absolute;
 27  width: 100%;
 28  height: 100%;
 29  background: rgba(0, 30, 60, 0.4);
 30  border-radius: 30px;
 31  cursor: pointer;
 32  box-shadow:
 33    0 0 15px rgba(0, 80, 255, 0.2),
 34    inset 0 0 10px rgba(0, 0, 0, 0.8);
 35  overflow: hidden;
 36  backdrop-filter: blur(5px);
 37  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
 38  border: 1px solid rgba(0, 150, 255, 0.3);
 39}
 40 
 41.toggle-track::before {
 42  content: "";
 43  position: absolute;
 44  top: 0;
 45  left: 0;
 46  width: 100%;
 47  height: 100%;
 48  background: radial-gradient(
 49      ellipse at center,
 50      rgba(0, 80, 255, 0.1) 0%,
 51      rgba(0, 0, 0, 0) 70%
 52    ),
 53    linear-gradient(90deg, rgba(0, 60, 120, 0.1) 0%, rgba(0, 30, 60, 0.2) 100%);
 54  opacity: 0.6;
 55  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
 56}
 57 
 58.toggle-track::after {
 59  content: "";
 60  position: absolute;
 61  top: 2px;
 62  left: 2px;
 63  right: 2px;
 64  height: 10px;
 65  background: linear-gradient(
 66    90deg,
 67    rgba(0, 170, 255, 0.3) 0%,
 68    rgba(0, 80, 255, 0.1) 100%
 69  );
 70  border-radius: 30px 30px 0 0;
 71  opacity: 0.7;
 72  filter: blur(1px);
 73}
 74 
 75.track-lines {
 76  position: absolute;
 77  top: 50%;
 78  left: 0;
 79  width: 100%;
 80  height: 1px;
 81  transform: translateY(-50%);
 82  overflow: hidden;
 83}
 84 
 85.track-line {
 86  position: absolute;
 87  top: 0;
 88  left: 0;
 89  width: 100%;
 90  height: 100%;
 91  background: repeating-linear-gradient(
 92    90deg,
 93    rgba(0, 150, 255, 0.3) 0px,
 94    rgba(0, 150, 255, 0.3) 5px,
 95    transparent 5px,
 96    transparent 15px
 97  );
 98  animation: track-line-move 3s linear infinite;
 99}
100 
101@keyframes track-line-move {
102  0% {
103    transform: translateX(0);
104  }
105  100% {
106    transform: translateX(20px);
107  }
108}
109 
110.toggle-thumb {
111  position: absolute;
112  width: 54px;
113  height: 54px;
114  left: 3px;
115  top: 3px;
116  background: radial-gradient(
117    circle,
118    rgba(10, 40, 90, 0.9) 0%,
119    rgba(0, 20, 50, 0.8) 100%
120  );
121  border-radius: 50%;
122  box-shadow:
123    0 2px 15px rgba(0, 0, 0, 0.5),
124    inset 0 0 15px rgba(0, 150, 255, 0.5);
125  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
126  z-index: 2;
127  border: 1px solid rgba(0, 170, 255, 0.6);
128  overflow: hidden;
129  transform-style: preserve-3d;
130}
131 
132.thumb-core {
133  position: absolute;
134  width: 40px;
135  height: 40px;
136  top: 50%;
137  left: 50%;
138  transform: translate(-50%, -50%);
139  background: radial-gradient(
140    circle,
141    rgba(0, 180, 255, 0.6) 0%,
142    rgba(0, 50, 120, 0.2) 100%
143  );
144  border-radius: 50%;
145  box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
146  opacity: 0.9;
147  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
148}
149 
150.thumb-inner {
151  position: absolute;
152  width: 25px;
153  height: 25px;
154  top: 50%;
155  left: 50%;
156  transform: translate(-50%, -50%);
157  background: radial-gradient(
158    circle,
159    rgba(255, 255, 255, 0.8) 0%,
160    rgba(100, 200, 255, 0.5) 100%
161  );
162  border-radius: 50%;
163  box-shadow: 0 0 10px rgba(100, 200, 255, 0.7);
164  opacity: 0.7;
165  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
166  animation: pulse 2s infinite alternate;
167}
168 
169@keyframes pulse {
170  0% {
171    opacity: 0.5;
172    transform: translate(-50%, -50%) scale(0.9);
173  }
174  100% {
175    opacity: 0.8;
176    transform: translate(-50%, -50%) scale(1.1);
177  }
178}
179 
180.thumb-scan {
181  position: absolute;
182  width: 100%;
183  height: 5px;
184  background: linear-gradient(
185    90deg,
186    rgba(0, 0, 0, 0) 0%,
187    rgba(0, 150, 255, 0.5) 20%,
188    rgba(255, 255, 255, 0.8) 50%,
189    rgba(0, 150, 255, 0.5) 80%,
190    rgba(0, 0, 0, 0) 100%
191  );
192  top: 0;
193  left: 0;
194  filter: blur(1px);
195  animation: thumb-scan 2s linear infinite;
196  opacity: 0.7;
197}
198 
199@keyframes thumb-scan {
200  0% {
201    top: -5px;
202    opacity: 0;
203  }
204  20% {
205    opacity: 0.7;
206  }
207  80% {
208    opacity: 0.7;
209  }
210  100% {
211    top: 54px;
212    opacity: 0;
213  }
214}
215 
216.thumb-particles {
217  position: absolute;
218  width: 100%;
219  height: 100%;
220  top: 0;
221  left: 0;
222  overflow: hidden;
223}
224 
225.thumb-particle {
226  position: absolute;
227  width: 3px;
228  height: 3px;
229  background: rgba(100, 200, 255, 0.8);
230  border-radius: 50%;
231  box-shadow: 0 0 5px rgba(100, 200, 255, 0.8);
232  animation: thumb-particle-float 3s infinite ease-out;
233  opacity: 0;
234}
235 
236.thumb-particle:nth-child(1) {
237  top: 70%;
238  left: 30%;
239  animation-delay: 0.2s;
240}
241 
242.thumb-particle:nth-child(2) {
243  top: 60%;
244  left: 60%;
245  animation-delay: 0.6s;
246}
247 
248.thumb-particle:nth-child(3) {
249  top: 50%;
250  left: 40%;
251  animation-delay: 1s;
252}
253 
254.thumb-particle:nth-child(4) {
255  top: 40%;
256  left: 70%;
257  animation-delay: 1.4s;
258}
259 
260.thumb-particle:nth-child(5) {
261  top: 80%;
262  left: 50%;
263  animation-delay: 1.8s;
264}
265 
266@keyframes thumb-particle-float {
267  0% {
268    transform: translateY(0) scale(1);
269    opacity: 0;
270  }
271  20% {
272    opacity: 0.8;
273  }
274  100% {
275    transform: translateY(-30px) scale(0);
276    opacity: 0;
277  }
278}
279 
280.toggle-data {
281  position: absolute;
282  width: 100%;
283  height: 100%;
284  z-index: 1;
285}
286 
287.data-text {
288  position: absolute;
289  font-size: 12px;
290  font-weight: 500;
291  letter-spacing: 1px;
292  text-transform: uppercase;
293  transition: all 0.5s ease;
294}
295 
296.data-text.off {
297  right: 12px;
298  top: 50%;
299  transform: translateY(-50%);
300  opacity: 1;
301  color: rgba(0, 150, 255, 0.6);
302  text-shadow: 0 0 5px rgba(0, 100, 255, 0.4);
303}
304 
305.data-text.on {
306  left: 15px;
307  top: 50%;
308  transform: translateY(-50%);
309  opacity: 0;
310  color: rgba(0, 255, 150, 0.6);
311  text-shadow: 0 0 5px rgba(0, 255, 100, 0.4);
312}
313 
314.status-indicator {
315  position: absolute;
316  width: 10px;
317  height: 10px;
318  border-radius: 50%;
319  background: radial-gradient(
320    circle,
321    rgba(0, 180, 255, 0.8) 0%,
322    rgba(0, 80, 200, 0.4) 100%
323  );
324  box-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
325  animation: blink 2s infinite alternate;
326  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
327}
328 
329.status-indicator.off {
330  top: 25px;
331  right: 15px;
332}
333 
334.status-indicator.on {
335  top: 25px;
336  left: 15px;
337  opacity: 0;
338  background: radial-gradient(
339    circle,
340    rgba(0, 255, 150, 0.8) 0%,
341    rgba(0, 200, 80, 0.4) 100%
342  );
343  box-shadow: 0 0 10px rgba(0, 255, 150, 0.5);
344}
345 
346@keyframes blink {
347  0%,
348  100% {
349    opacity: 0.5;
350    transform: scale(0.9);
351  }
352  50% {
353    opacity: 1;
354    transform: scale(1.1);
355  }
356}
357 
358.energy-rings {
359  position: absolute;
360  width: 54px;
361  height: 54px;
362  left: 3px;
363  top: 3px;
364  pointer-events: none;
365  z-index: 1;
366  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
367}
368 
369.energy-ring {
370  position: absolute;
371  top: 50%;
372  left: 50%;
373  transform: translate(-50%, -50%);
374  border-radius: 50%;
375  border: 2px solid transparent;
376  opacity: 0;
377}
378 
379.energy-ring:nth-child(1) {
380  width: 50px;
381  height: 50px;
382  border-top-color: rgba(0, 150, 255, 0.5);
383  border-right-color: rgba(0, 150, 255, 0.3);
384  animation: spin 3s linear infinite;
385}
386 
387.energy-ring:nth-child(2) {
388  width: 40px;
389  height: 40px;
390  border-bottom-color: rgba(0, 150, 255, 0.5);
391  border-left-color: rgba(0, 150, 255, 0.3);
392  animation: spin 2s linear infinite reverse;
393}
394 
395.energy-ring:nth-child(3) {
396  width: 30px;
397  height: 30px;
398  border-left-color: rgba(0, 150, 255, 0.5);
399  border-top-color: rgba(0, 150, 255, 0.3);
400  animation: spin 1.5s linear infinite;
401}
402 
403@keyframes spin {
404  0% {
405    transform: translate(-50%, -50%) rotate(0deg);
406  }
407  100% {
408    transform: translate(-50%, -50%) rotate(360deg);
409  }
410}
411 
412.interface-lines {
413  position: absolute;
414  width: 100%;
415  height: 100%;
416  pointer-events: none;
417}
418 
419.interface-line {
420  position: absolute;
421  background: rgba(0, 150, 255, 0.3);
422  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
423}
424 
425.interface-line:nth-child(1) {
426  width: 15px;
427  height: 1px;
428  bottom: -5px;
429  left: 20px;
430}
431 
432.interface-line:nth-child(2) {
433  width: 1px;
434  height: 8px;
435  bottom: -12px;
436  left: 35px;
437}
438 
439.interface-line:nth-child(3) {
440  width: 25px;
441  height: 1px;
442  bottom: -12px;
443  left: 35px;
444}
445 
446.interface-line:nth-child(4) {
447  width: 15px;
448  height: 1px;
449  bottom: -5px;
450  right: 20px;
451}
452 
453.interface-line:nth-child(5) {
454  width: 1px;
455  height: 8px;
456  bottom: -12px;
457  right: 35px;
458}
459 
460.interface-line:nth-child(6) {
461  width: 25px;
462  height: 1px;
463  bottom: -12px;
464  right: 10px;
465}
466 
467.toggle-reflection {
468  position: absolute;
469  width: 100%;
470  height: 100%;
471  top: 0;
472  left: 0;
473  background: linear-gradient(
474    135deg,
475    rgba(255, 255, 255, 0.1) 0%,
476    rgba(255, 255, 255, 0) 40%
477  );
478  border-radius: 30px;
479  pointer-events: none;
480}
481 
482.toggle-label {
483  position: relative;
484  margin-top: 20px;
485  font-size: 14px;
486  text-transform: uppercase;
487  letter-spacing: 2px;
488  text-align: center;
489  color: rgba(0, 150, 255, 0.7);
490  text-shadow: 0 0 10px rgba(0, 100, 255, 0.5);
491  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
492}
493 
494.holo-glow {
495  position: absolute;
496  width: 100%;
497  height: 100%;
498  border-radius: 30px;
499  background: radial-gradient(
500    ellipse at center,
501    rgba(0, 150, 255, 0.2) 0%,
502    rgba(0, 0, 0, 0) 70%
503  );
504  filter: blur(10px);
505  opacity: 0.5;
506  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
507  z-index: 0;
508}
509 
510.toggle-input:checked + .toggle-track {
511  background: rgba(0, 60, 30, 0.4);
512  border-color: rgba(0, 255, 150, 0.3);
513  box-shadow:
514    0 0 15px rgba(0, 255, 150, 0.2),
515    inset 0 0 10px rgba(0, 0, 0, 0.8);
516}
517 
518.toggle-input:checked + .toggle-track::before {
519  background: radial-gradient(
520      ellipse at center,
521      rgba(0, 255, 150, 0.1) 0%,
522      rgba(0, 0, 0, 0) 70%
523    ),
524    linear-gradient(90deg, rgba(0, 120, 60, 0.1) 0%, rgba(0, 60, 30, 0.2) 100%);
525}
526 
527.toggle-input:checked + .toggle-track::after {
528  background: linear-gradient(
529    90deg,
530    rgba(0, 255, 150, 0.3) 0%,
531    rgba(0, 160, 80, 0.1) 100%
532  );
533}
534 
535.toggle-input:checked + .toggle-track .track-line {
536  background: repeating-linear-gradient(
537    90deg,
538    rgba(0, 255, 150, 0.3) 0px,
539    rgba(0, 255, 150, 0.3) 5px,
540    transparent 5px,
541    transparent 15px
542  );
543  animation-direction: reverse;
544}
545 
546.toggle-input:checked + .toggle-track .toggle-thumb {
547  left: calc(100% - 57px);
548  background: radial-gradient(
549    circle,
550    rgba(10, 90, 40, 0.9) 0%,
551    rgba(0, 50, 20, 0.8) 100%
552  );
553  border-color: rgba(0, 255, 150, 0.6);
554  box-shadow:
555    0 2px 15px rgba(0, 0, 0, 0.5),
556    inset 0 0 15px rgba(0, 255, 150, 0.5);
557}
558 
559.toggle-input:checked + .toggle-track .thumb-core {
560  background: radial-gradient(
561    circle,
562    rgba(0, 255, 150, 0.6) 0%,
563    rgba(0, 120, 50, 0.2) 100%
564  );
565  box-shadow: 0 0 20px rgba(0, 255, 150, 0.5);
566}
567 
568.toggle-input:checked + .toggle-track .thumb-inner {
569  background: radial-gradient(
570    circle,
571    rgba(255, 255, 255, 0.8) 0%,
572    rgba(100, 255, 200, 0.5) 100%
573  );
574  box-shadow: 0 0 10px rgba(100, 255, 200, 0.7);
575}
576 
577.toggle-input:checked + .toggle-track .thumb-scan {
578  background: linear-gradient(
579    90deg,
580    rgba(0, 0, 0, 0) 0%,
581    rgba(0, 255, 150, 0.5) 20%,
582    rgba(255, 255, 255, 0.8) 50%,
583    rgba(0, 255, 150, 0.5) 80%,
584    rgba(0, 0, 0, 0) 100%
585  );
586}
587 
588.toggle-input:checked + .toggle-track .thumb-particle {
589  background: rgba(100, 255, 200, 0.8);
590  box-shadow: 0 0 5px rgba(100, 255, 200, 0.8);
591}
592 
593.toggle-input:checked + .toggle-track .data-text.off {
594  opacity: 0;
595}
596 
597.toggle-input:checked + .toggle-track .data-text.on {
598  opacity: 1;
599}
600 
601.toggle-input:checked + .toggle-track .status-indicator.off {
602  opacity: 0;
603}
604 
605.toggle-input:checked + .toggle-track .status-indicator.on {
606  opacity: 1;
607}
608 
609.toggle-input:checked + .toggle-track .energy-rings {
610  left: calc(100% - 57px);
611}
612 
613.toggle-input:checked + .toggle-track .energy-ring {
614  opacity: 1;
615}
616 
617.toggle-input:checked + .toggle-track .energy-ring:nth-child(1) {
618  border-top-color: rgba(0, 255, 150, 0.5);
619  border-right-color: rgba(0, 255, 150, 0.3);
620}
621 
622.toggle-input:checked + .toggle-track .energy-ring:nth-child(2) {
623  border-bottom-color: rgba(0, 255, 150, 0.5);
624  border-left-color: rgba(0, 255, 150, 0.3);
625}
626 
627.toggle-input:checked + .toggle-track .energy-ring:nth-child(3) {
628  border-left-color: rgba(0, 255, 150, 0.5);
629  border-top-color: rgba(0, 255, 150, 0.3);
630}
631 
632.toggle-input:checked + .toggle-track .interface-line {
633  background: rgba(0, 255, 150, 0.3);
634}
635 
636.toggle-input:checked ~ .toggle-label {
637  color: rgba(0, 255, 150, 0.7);
638  text-shadow: 0 0 10px rgba(0, 255, 150, 0.5);
639}
640 
641.toggle-input:checked + .toggle-track .holo-glow {
642  background: radial-gradient(
643    ellipse at center,
644    rgba(0, 255, 150, 0.2) 0%,
645    rgba(0, 0, 0, 0) 70%
646  );
647}
648 
649.toggle-input:hover + .toggle-track {
650  box-shadow:
651    0 0 20px rgba(0, 150, 255, 0.3),
652    inset 0 0 10px rgba(0, 0, 0, 0.8);
653}
654 
655.toggle-input:checked:hover + .toggle-track {
656  box-shadow:
657    0 0 20px rgba(0, 255, 150, 0.3),
658    inset 0 0 10px rgba(0, 0, 0, 0.8);
659}