Switch by vikramsinghnegi
#e8e8e8
1.checkbox-wrap { 2 display: block; 3 width: 106px; 4 height: 51px; 5 position: relative; 6 margin: 1px auto; 7} 8#slide { 9 display: block; 10 width: 106px; 11 height: 51px; 12 margin: 0px; 13 padding: 0px; 14 position: absolute; 15 z-index: 2; 16 opacity: 0; 17} 18#slide + label { 19 display: block; 20 width: 105px; 21 height: 50px; 22 margin: 0px; 23 padding: 0px; 24 z-index: 1; 25 border-top: 1px solid transparent; 26 border-left: 1px solid transparent; 27} 28#pinkliquid { 29 width: 88px; 30 height: 36px; 31 border-radius: 18px; 32 margin: 7px 0 0 9px; 33 overflow: hidden; 34 background: #b4264a; 35 background: linear-gradient(to bottom, #fe0744 0%, #ff0460 50%, #ff0082 100%); 36 box-shadow: 0px 0px 9px 0px #ff1e00; 37} 38.shine { 39 width: 100%; 40 background: rgba(255, 255, 255, 0.23); 41 margin: 6px 0 4px 0; 42 transition: all 300ms ease; 43} 44.shine#shine-one { 45 height: 12px; 46} 47.shine#shine-two { 48 height: 3px; 49} 50#bubbles { 51 position: absolute; 52 width: 100%; 53 height: 100%; 54 top: 0px; 55 left: 0px; 56} 57#bubbles i { 58 display: block; 59 border-radius: 20px; 60 background: #3a3236; 61 position: absolute; 62 transition: all 600ms ease; 63} 64i#a { 65 width: 4px; 66 height: 4px; 67 top: 35px; 68 left: 19px; 69} 70i#b { 71 width: 5px; 72 height: 5px; 73 top: 24px; 74 left: 30px; 75} 76i#c { 77 width: 3px; 78 height: 3px; 79 top: 15px; 80 left: 26px; 81} 82i#d { 83 width: 6px; 84 height: 6px; 85 top: 20px; 86 left: 40px; 87} 88i#e { 89 width: 5px; 90 height: 5px; 91 top: 30px; 92 left: 33px; 93} 94i#f { 95 width: 5px; 96 height: 5px; 97 top: 30px; 98 right: 33px; 99} 100i#g { 101 width: 6px; 102 height: 6px; 103 top: 20px; 104 right: 40px; 105} 106i#h { 107 width: 3px; 108 height: 3px; 109 top: 15px; 110 right: 26px; 111} 112i#i { 113 width: 4px; 114 height: 4px; 115 top: 35px; 116 right: 19px; 117} 118i#j { 119 width: 5px; 120 height: 5px; 121 top: 24px; 122 right: 30px; 123} 124#circle { 125 width: 37px; 126 height: 37px; 127 border-radius: 19px; 128 background: #191919; 129 position: absolute; 130 top: 7px; 131 left: 9px; 132 border-right: 1px solid #e3006f; 133 box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.24), 134 0px 3px 4px 0px #000000; 135 transition: all 300ms ease; 136} 137#inner-circle { 138 width: 31px; 139 height: 31px; 140 margin: 3px; 141 border-radius: 16px; 142 background: linear-gradient( 143 to right, 144 rgba(0, 0, 0, 0) 0%, 145 rgba(255, 1, 122, 0.2) 100% 146 ); 147} 148#slide:checked + label #circle { 149 left: 60px; 150 border-right: 1px solid transparent; 151 border-left: 1px solid #e3006f; 152 background-color: #c27098; 153} 154#slide:checked + label #inner-circle { 155 background: linear-gradient( 156 to right, 157 rgba(255, 1, 122, 0.2) 0%, 158 rgba(0, 0, 0, 0) 100% 159 ); 160} 161#slide:checked + label i#a { 162 width: 4px; 163 height: 4px; 164 top: 26px; 165 left: 19px; 166} 167#slide:checked + label i#b { 168 width: 5px; 169 height: 5px; 170 top: 24px; 171 left: 30px; 172} 173#slide:checked + label i#c { 174 width: 3px; 175 height: 3px; 176 top: 24px; 177 left: 26px; 178} 179#slide:checked + label i#d { 180 width: 6px; 181 height: 6px; 182 top: 29px; 183 left: 40px; 184} 185#slide:checked + label i#e { 186 width: 5px; 187 height: 5px; 188 top: 21px; 189 left: 33px; 190} 191#slide:checked + label i#f { 192 width: 5px; 193 height: 5px; 194 top: 26px; 195 right: 33px; 196} 197#slide:checked + label i#g { 198 width: 6px; 199 height: 6px; 200 top: 28px; 201 right: 40px; 202} 203#slide:checked + label i#h { 204 width: 3px; 205 height: 3px; 206 top: 23px; 207 right: 26px; 208} 209#slide:checked + label i#i { 210 width: 4px; 211 height: 4px; 212 top: 25px; 213 right: 19px; 214} 215#slide:checked + label i#j { 216 width: 5px; 217 height: 5px; 218 top: 30px; 219 right: 30px; 220} 221#slide:checked + label .shine#shine-one { 222 height: 12px; 223 margin-top: 12px; 224} 225#slide:checked + label .shine#shine-two { 226 height: 3px; 227 margin-top: -20px; 228} 229
293 views
293 views
MIT License