![](/build/_assets/logo-png-XGWSYHKJ.png)
Switch by Na3ar-17
#28a7a8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 95px; 7 height: 50px; 8 background-color: #2a2a2a; 9 border-radius: 30px; 10 cursor: pointer; 11} 12 13/* Hide default HTML checkbox */ 14.switch input { 15 opacity: 0; 16 width: 0; 17 height: 0; 18} 19 20/* The slider */ 21.slider { 22 position: absolute; 23 top: 50%; 24 left: 26%; 25 transform: translate(-50%, -50%); 26 height: 40px; 27 width: 40px; 28 border-radius: 50%; 29 background-color: white; 30 transition: 0.3s cubic-bezier(0.68, -0.25, 0.265, 1.1); 31 overflow: hidden; 32} 33 34.slider .yolk { 35 position: absolute; 36 top: 50%; 37 left: 50%; 38 transform: translate(-50%, -50%); 39 width: 25px; 40 aspect-ratio: 1/1; 41 background-color: #f2a828; 42 border-radius: 50%; 43 -webkit-box-shadow: inset -2px -2px 43px -35px rgba(255, 255, 255, 1); 44 -moz-box-shadow: inset -2px -2px 43px -35px rgba(255, 255, 255, 1); 45 box-shadow: inset -2px -2px 43px -35px rgba(255, 255, 255, 1); 46} 47 48.slider .yolk::before { 49 content: ""; 50 position: absolute; 51 top: 50%; 52 left: -22px; 53 transform: translate(-50%, -50%); 54 width: 30px; 55 height: 30px; 56 background-color: #cabea8; 57 border-radius: 50%; 58} 59 60.slider .yolk::after { 61 content: ""; 62 position: absolute; 63 top: 50%; 64 left: 50%; 65 transform: translate(-50%, -50%) rotate(45deg); 66 width: 16px; 67 height: 16px; 68 background-color: transparent; 69 border-left: 6px solid #fff; 70 clip-path: circle(50% at 50% 50%); 71} 72 73.slider .back { 74 position: absolute; 75 top: 50%; 76 left: -50%; 77 transform: translate(-50%, -50%); 78 height: 40px; 79 width: 40px; 80 border-radius: 50%; 81 background-color: #cabea8; 82 transition: 0.3s cubic-bezier(0, 0, 0.265, 1.1); 83 overflow: hidden; 84} 85 86.slider .back::before { 87 content: ""; 88 position: absolute; 89 top: 50%; 90 left: 50%; 91 transform: translate(-50%, -50%); 92 width: 25px; 93 aspect-ratio: 1/1; 94 background-color: #eec076; 95 border-radius: 50%; 96} 97 98.switch input:checked + .slider { 99 left: 74%; 100} 101 102.switch input:checked + .slider .back { 103 left: 50%; 104} 105
49 views
49 views
MIT License