Switch by csemszepp
#e8e8e8
1.form { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 height: 100px; 6 padding: 10px 0; 7 width: 260px; 8 transform: translate3d(-50%,-50%,0); 9} 10 11.form:before { 12 content: ''; 13 position: absolute; 14 top: 0; 15 left: -5px; 16 height: 100%; 17 width: 120px; 18 background-color: #243548; 19 border-radius: 50%; 20 box-shadow: 75px 0 0 #243548, 150px 0 0 #243548; 21} 22 23.form:after { 24 content: ''; 25 position: absolute; 26 top: -94px; 27 left: 70px; 28 height: 100%; 29 width: 120px; 30 border-radius: 50%; 31} 32 33.form input { 34 position: absolute; 35 left: -9999px; 36} 37 38.bubble { 39 position: absolute; 40 z-index: 2; 41 cursor: pointer; 42 top: 50%; 43 left: 50%; 44 height: 100px; 45 width: 100px; 46 transform: translate3d(-75%,-50%,0); 47 margin-left: -50px; 48 background: #BBBBBB; 49 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 50 border-right: 0px solid #BBBBBB; 51 border-left: 0px solid #BBBBBB; 52 animation: toggle-reverse 2s 1; 53} 54 55#bubble:checked + .bubble { 56 animation: toggle 2s 1; 57 transform: translate3d(75%,-50%,0); 58 background: #3CCC97; 59} 60 61.bubble:after { 62 content: ''; 63 position: absolute; 64 top: 50%; 65 margin-top: -15px; 66 margin-left: -2px; 67 height: 30px; 68 width: 4px; 69 background: #fff; 70 left: 50%; 71 transform: rotate(45deg); 72 border-radius: 2px; 73 transition: 500ms ease all 1.25s; 74} 75 76.bubble:before { 77 content: ''; 78 position: absolute; 79 top: 50%; 80 margin-top: -15px; 81 margin-left: -2px; 82 height: 30px; 83 width: 4px; 84 background: #fff; 85 left: 50%; 86 transform: rotate(-45deg); 87 border-radius: 2px; 88 transition: 500ms ease all 1.25s; 89} 90 91#bubble:checked + .bubble:after { 92 content: ''; 93 position: absolute; 94 top: 50%; 95 margin-top: -15px; 96 margin-left: 5px; 97 height: 30px; 98 width: 4px; 99 background: #fff; 100 left: 50%; 101 transform: rotate(225deg); 102 border-radius: 2px; 103} 104 105#bubble:checked + .bubble:before { 106 content: ''; 107 position: absolute; 108 top: 50%; 109 margin-top: -7px; 110 margin-left: -10px; 111 height: 20px; 112 width: 4px; 113 background: #fff; 114 left: 50%; 115 transform: rotate(-215deg); 116 border-radius: 2px; 117} 118 119@keyframes toggle { 120 0% { 121 transform: translate3d(-75%,-50%,0); 122 border-right: 0 solid #BBBBBB; 123 border-left: 0 solid #BBBBBB; 124 background: #BBBBBB; 125 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 126 height: 100px; 127 } 128 129 20% { 130 border-right: 0 solid #BBBBBB; 131 border-left: 0 solid #BBBBBB; 132 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 133 transform: translate3d(-75%,-50%,0); 134 height: 100px; 135 } 136 137 40% { 138 border-left: 0 solid #BBBBBB; 139 border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%; 140 height: 90px; 141 } 142 143 50% { 144 transform: translate3d(0%,-50%,0); 145 border-right: 25px solid #BBBBBB; 146 border-left: 0 solid #BBBBBB; 147 background: #BBBBBB; 148 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 149 height: 90px; 150 } 151 152 75% { 153 border-left: 25px solid #3CCC97; 154 border-color: #3CCC97; 155 background: #3CCC97; 156 border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%; 157 height: 90px; 158 } 159 160 100% { 161 border-right: 0 solid #3CCC97; 162 border-left: 0 solid #3CCC97; 163 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 164 transform: translate3d(75%,-50%,0); 165 height: 100px; 166 width: 100px 167 } 168} 169 170@keyframes toggle-reverse { 171 0% { 172 transform: translate3d(75%,-50%,0); 173 background: #3CCC97; 174 border-right: 0 solid #3CCC97; 175 border-left: 0 solid #3CCC97; 176 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 177 height: 100px; 178 } 179 180 20% { 181 border-right: 0 solid #3CCC97; 182 border-left: 0 solid #3CCC97; 183 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 184 transform: translate3d(75%,-50%,0); 185 height: 100px; 186 } 187 188 40% { 189 border-right: 0 solid #3CCC97; 190 border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%; 191 height: 90px; 192 } 193 194 50% { 195 transform: translate3d(0%,-50%,0); 196 border-left: 25px solid #3CCC97; 197 border-right: 0 solid #3CCC97; 198 background: #3CCC97; 199 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 200 height: 90px; 201 } 202 203 75% { 204 border-right: 25px solid #BBBBBB; 205 border-color: #BBBBBB; 206 background: #BBBBBB; 207 border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%; 208 height: 90px; 209 } 210 211 100% { 212 border-right: 0 solid #BBBBBB; 213 border-left: 0 solid #BBBBBB; 214 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 215 transform: translate3d(-75%,-50%,0); 216 height: 100px; 217 width: 100px 218 } 219}
813 views
813 views
MIT License