Button by simontheonlyone
#e8e8e8
1button { 2 position: relative; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 width: 11em; 7 height: 4em; 8 border: none; 9 border-radius: 2.1em; 10 background-color: rgb(23, 56, 128); 11 color: whitesmoke; 12 font-weight: bold; 13 font-size: 17px; 14 text-align: center; 15 cursor: pointer; 16 transition: background-color .2s linear 1.1s, 17 color .2s linear 1.1s; 18} 19 20button:active, 21button:focus { 22 background: rgb(254, 138, 30); 23} 24 25button .day { 26 position: absolute; 27 opacity: 0; 28 transition: all .2s ease 1.1s; 29} 30 31button .night { 32 transition: all .2s ease 1.1s; 33} 34 35button:active .night, 36button:focus .night { 37 color: transparent; 38} 39 40button:active .day, 41button:focus .day { 42 opacity: 1; 43} 44/* mini cloud */ 45.mini-cloud { 46 content: ''; 47 position: absolute; 48 inset: -26% 62%; 49 scale: 2; 50 opacity: 1; 51 color: rgb(150, 150, 150); 52 transform: rotate(3deg); 53 transition: scale .4s ease .3s, 54 opacity .4s ease 1.3s; 55 pointer-events: none; 56} 57/* lightning */ 58.lightning { 59 content: ''; 60 position: absolute; 61 inset: -4% 62%; 62 scale: 1.3; 63 transform: rotate(15deg); 64 transition: all .4s ease .2s, 65 opacity .4s ease 1.5s; 66 pointer-events: none; 67} 68/* stars */ 69.stars { 70 content: ''; 71 position: absolute; 72 pointer-events: none; 73} 74 75.star1 { 76 inset: 15% 10%; 77 scale: 1.2; 78 opacity: 1; 79 transition: all .4s ease .4s, 80 opacity .4s ease 1.6s; 81} 82 83.star2 { 84 inset: 45% 80%; 85 scale: 1; 86 opacity: 1; 87 transition: all .4s ease .5s, 88 opacity .4s ease 1.7s; 89} 90/* cloud */ 91.cloud { 92 content: ''; 93 position: absolute; 94 pointer-events: none; 95 border: none; 96} 97 98.left-side { 99 width: 4.4em; 100 height: 4.4em; 101 bottom: 0; 102 left: -.8em; 103 scale: 1; 104 border-radius: 50%; 105 z-index: -5; 106 background-color: rgb(15, 39, 91); 107 transition: all .6s ease .6s; 108} 109 110.left-side1 { 111 width: 4.4em; 112 height: 4.4em; 113 bottom: 0; 114 left: -.4em; 115 scale: .95; 116 border-radius: 50%; 117 z-index: -4; 118 background-color: rgb(23, 56, 128); 119 transition: all .5s ease .5s; 120} 121 122.middle-side { 123 width: 9em; 124 height: 8.3em; 125 bottom: 0; 126 left: 1em; 127 border-radius: 50%; 128 scale: 1; 129 z-index: -7; 130 background-color: rgb(15, 39, 91); 131 transition: scale, bottom, .4s ease .8s, opactiy .2s linear .8s; 132} 133 134.middle-side1 { 135 width: 9em; 136 height: 8.3em; 137 bottom: -2px; 138 left: 1.1em; 139 scale: .95; 140 z-index: -6; 141 border-radius: 50%; 142 background-color: rgb(23, 56, 128); 143 transition: scale, bottom, .4s ease .75s, opactiy .2s linear .75s; 144} 145 146.right-side { 147 width: 5.5em; 148 height: 5.5em; 149 bottom: -1px; 150 right: -1.4em; 151 border-radius: 50%; 152 scale: .98; 153 z-index: -5; 154 background-color: rgb(15, 39, 91); 155 transition: all .6s ease .7s; 156} 157 158.right-side1 { 159 width: 5.5em; 160 height: 5.5em; 161 bottom: 0; 162 right: -1.05em; 163 border-radius: 50%; 164 scale: .92; 165 z-index: -4; 166 background-color: rgb(23, 56, 128); 167 transition: all .5s ease .6s; 168} 169/* night active animation */ 170button:active .star1, 171button:focus .star1 { 172 scale: 0; 173 opacity: 0; 174} 175 176button:active .star2, 177button:focus .star2 { 178 scale: 0; 179 opacity: 0; 180} 181 182button:active .mini-cloud, 183button:focus .mini-cloud { 184 scale: 0; 185 opacity: 0; 186} 187 188button:active .lightning, 189button:focus .lightning { 190 scale: 0; 191 opacity: 0; 192} 193 194button:active .left-side, 195button:focus .left-side, 196button:active .left-side1, 197button:focus .left-side1 { 198 scale: 0; 199 opacity: 0; 200} 201 202button:active .middle-side, 203button:focus .middle-side, 204button:active .middle-side1, 205button:focus .middle-side1 { 206 scale: 0; 207 opacity: 0; 208 bottom: -40%; 209} 210 211button:active .right-side, 212button:focus .right-side, 213button:active .right-side1, 214button:focus .right-side1 { 215 scale: 0; 216 opacity: 0; 217} 218/* sun */ 219.sun { 220 position: absolute; 221 top: -100%; 222 left: -4%; 223 width: 12em; 224 height: 12em; 225 background-color: #fe8a1e; 226 /* background: linear-gradient(blue, red); */ 227 border: none; 228 border-radius: 50%; 229 scale: 0; 230 opacity: 0; 231 pointer-events: none; 232 z-index: -10; 233 pointer-events: none; 234 transition: scale .3s ease 1.4s, 235 opacity .7s ease; 236} 237 238button:active .sun, 239button:focus .sun { 240 scale: .95; 241 opacity: 1; 242} 243/* sunshine */ 244.sunshine { 245 content: ''; 246 position: absolute; 247 width: 18.5em; 248 height: 18.5em; 249 scale: 0; 250 opacity: 0; 251 z-index: -9; 252 pointer-events: none; 253 animation: spin 15s infinite linear; 254 transition: scale .3s ease 1.5s, 255 opacity .1s ease; 256} 257 258button:active .sunshine, 259button:focus .sunshine { 260 scale: 1; 261 opacity: 1; 262} 263 264@keyframes spin { 265 to { 266 transform: rotate(360deg); 267 } 268} 269 270.cloudflare { 271 position: absolute; 272 opacity: 0; 273 scale: 0; 274 pointer-events: none; 275} 276 277.cloudflare-one { 278 inset: 5% 77%; 279 width: 25px; 280 height: 25px; 281 transition: scale .3s ease 1.6s, 282 opacity .3s ease; 283} 284 285.cloudflare-two { 286 inset: -43% 45%; 287 width: 32px; 288 height: 32px; 289 transition: scale .3s ease 1.8s, 290 opacity .3s ease; 291} 292 293.cloudflare-three { 294 inset: -10% 17%; 295 width: 23px; 296 height: 23px; 297 transition: scale .3s ease 1.7s, 298 opacity .3s ease; 299} 300 301button:active .cloudflare, 302button:focus .cloudflare { 303 scale: 1; 304 opacity: 1; 305}
2.6K views
2.6K views
MIT License