Button by santhoshsj-dev
#212121
1.button { 2 display: flex; 3 position: relative; 4 width: 200px; 5 height: 60px; 6 text-decoration: none; 7 perspective: 600px; 8 background: linear-gradient(#ffffff1a 0%, #ffffff00 30%, #ffffff00 70%, #ffffff1a); 9 box-shadow: 0 0 32px #000000; 10} 11 12.button::before, 13.button::after { 14 content: ''; 15 position: absolute; 16 top: 0; 17 left: 0; 18 right: 0; 19 margin: 0 auto; 20 width: 100%; 21 height: 100%; 22} 23 24.button::before { 25 top: 0; 26 transform-origin: top center; 27 transform: rotateX(70deg); 28 background: linear-gradient(135deg, #ffffff4d 10%, #ffffff00 60%); 29} 30 31.button::after { 32 bottom: 0; 33 transform-origin: bottom center; 34 transform: rotateX(-110deg); 35 background: radial-gradient(#ffffff00 40%, #ffffff1a); 36} 37 38.button__wrapper { 39 position: relative; 40 z-index: 2; 41 width: 100%; 42 height: 100%; 43 background: linear-gradient(#ffffff66 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33); 44 transform: translate3d(0, 27px, 74px); 45 perspective: 600px; 46} 47 48.button__text { 49 position: relative; 50 display: flex; 51 justify-content: center; 52 align-items: center; 53 width: 100%; 54 height: 100%; 55 font-size: 32px; 56 font-weight: 900; 57 color: #ffffff33; 58 transition: all ease-in-out 1s; 59} 60 61.button__text::before { 62 content: ''; 63 position: absolute; 64 z-index: 1; 65 top: 0; 66 left: 0; 67 width: 200px; 68 height: 60px; 69 background: linear-gradient(25deg, #ffffff1a, #ffffff00); 70 clip-path: path('M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z'); 71} 72 73.button__text::after { 74 content: ''; 75 position: absolute; 76 z-index: 2; 77 top: 4px; 78 left: 4px; 79 width: 272px; 80 height: 40px; 81 background: linear-gradient(25deg, #ffffff4d, #ffffff00); 82 clip-path: path('M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z'); 83} 84 85.button__wrapper::before, 86.button__wrapper::after { 87 content: ''; 88 position: absolute; 89 top: 0; 90 width: 84px; 91 height: 100%; 92 background: linear-gradient(90deg, #ffffff33 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33); 93 background: radial-gradient(#ffffff00 40%, #ffffff1a); 94} 95 96.button__wrapper::before { 97 left: 0; 98 transform-origin: left center; 99 transform: rotateY(90deg) skewY(-20deg); 100} 101 102.button__wrapper::after { 103 right: 0; 104 transform-origin: right center; 105 transform: rotateY(-90deg) skewY(20deg); 106} 107 108.button__box { 109 position: absolute; 110 top: 0; 111 left: 8px; 112 bottom: 0; 113 margin: auto 0; 114 width: 180px; 115 height: 49px; 116 transform: translate3d(0, 4px, 10px); 117 perspective: 600px; 118} 119 120.inner { 121 transition: all ease-in-out 1s; 122} 123 124.inner__back { 125 position: absolute; 126 top: 0; 127 left: 0; 128 width: 0; 129 height: 100%; 130 background: #64646433; 131 perspective: 600px; 132} 133 134.inner__top { 135 position: absolute; 136 z-index: 3; 137 top: 0; 138 left: 0; 139 width: 0; 140 height: 100%; 141 transform-origin: top left; 142 transform: rotateX(70deg); 143 background: #646464cc; 144} 145 146.inner__front { 147 position: absolute; 148 z-index: 3; 149 top: 0; 150 left: 0; 151 width: 0; 152 height: 100%; 153 transform-origin: top left; 154 transform: translate3d(0, 24px, 68px); 155 background: #646464cc; 156} 157 158.inner__bottom { 159 position: absolute; 160 z-index: 2; 161 top: 0; 162 left: 0; 163 width: 0; 164 height: 100%; 165 transform-origin: bottom left; 166 transform: rotateX(-110deg); 167 background: #64646433; 168} 169 170.inner__left { 171 position: absolute; 172 z-index: 2; 173 top: 0; 174 left: 0; 175 width: 68px; 176 height: 100%; 177 transform-origin: center left; 178 transform: rotateY(-90deg) skewY(20deg); 179 background: rgba(255, 0, 0, 0); 180 transition: all linear .01s; 181} 182 183.inner__right { 184 position: absolute; 185 z-index: 2; 186 top: 0; 187 left: 0; 188 width: 68px; 189 height: 100%; 190 transform-origin: center left; 191 transform: rotateY(-90deg) skewY(20deg); 192 background: rgba(255, 0, 0, 0); 193} 194 195.button:hover .inner__top, 196.button:hover .inner__front, 197.button:hover .inner__bottom, 198.button:hover .inner__back { 199 width: 100%; 200} 201 202.button:hover .inner__left { 203 background: #64646480; 204} 205 206.button:hover .inner__right { 207 left: 100%; 208 background: #64646480; 209} 210 211.button:hover .button__text { 212 color: #ffffff; 213} 214 215.plate { 216 position: absolute; 217 z-index: 10; 218 top: 0; 219 left: -20px; 220 width: 320px; 221 height: 120px; 222 animation-duration: 3s; 223 animation-iteration-count: infinite; 224} 225 226.plate:nth-child(1) { 227 animation-name: plate_1; 228} 229 230.plate:nth-child(2) { 231 animation-name: plate_2; 232} 233 234.plate:nth-child(3) { 235 animation-name: plate_3; 236} 237 238.plate:nth-child(4) { 239 animation-name: plate_4; 240} 241 242.plate:nth-child(5) { 243 animation-name: plate_5; 244} 245 246.button:hover .plate { 247 animation-play-state: paused; 248} 249 250.plate:nth-child(1):hover~.button__box .inner__top, 251.plate:nth-child(1):hover~.button__box .inner__front { 252 background: #d8003ccc; 253} 254 255.plate:nth-child(1):hover~.button__box .inner__left, 256.plate:nth-child(1):hover~.button__box .inner__right { 257 background: #d8003c80; 258} 259 260.plate:nth-child(1):hover~.button__box .inner__back, 261.plate:nth-child(1):hover~.button__box .inner__bottom { 262 background: #d8003c33; 263} 264 265.plate:nth-child(2):hover~.button__box .inner__top, 266.plate:nth-child(2):hover~.button__box .inner__front { 267 background: #0064becc; 268} 269 270.plate:nth-child(2):hover~.button__box .inner__left, 271.plate:nth-child(2):hover~.button__box .inner__right { 272 background: #0064be80; 273} 274 275.plate:nth-child(2):hover~.button__box .inner__back, 276.plate:nth-child(2):hover~.button__box .inner__bottom { 277 background: #0064be33; 278} 279 280.plate:nth-child(3):hover~.button__box .inner__top, 281.plate:nth-child(3):hover~.button__box .inner__front { 282 background: #00aa64cc; 283} 284 285.plate:nth-child(3):hover~.button__box .inner__left, 286.plate:nth-child(3):hover~.button__box .inner__right { 287 background: #00aa6480; 288} 289 290.plate:nth-child(3):hover~.button__box .inner__back, 291.plate:nth-child(3):hover~.button__box .inner__bottom { 292 background: #00aa6433; 293} 294 295.plate:nth-child(4):hover~.button__box .inner__top, 296.plate:nth-child(4):hover~.button__box .inner__front { 297 background: #ffe614cc; 298} 299 300.plate:nth-child(4):hover~.button__box .inner__left, 301.plate:nth-child(4):hover~.button__box .inner__right { 302 background: #ffe61480; 303} 304 305.plate:nth-child(4):hover~.button__box .inner__back, 306.plate:nth-child(4):hover~.button__box .inner__bottom { 307 background: #ffe61433; 308} 309 310.plate:nth-child(5):hover~.button__box .inner__top, 311.plate:nth-child(5):hover~.button__box .inner__front { 312 background: #9b32ffcc; 313} 314 315.plate:nth-child(5):hover~.button__box .inner__left, 316.plate:nth-child(5):hover~.button__box .inner__right { 317 background: #9b32ff80; 318} 319 320.plate:nth-child(5):hover~.button__box .inner__back, 321.plate:nth-child(5):hover~.button__box .inner__bottom { 322 background: #9b32ff33; 323} 324 325@keyframes plate_1 { 326 0% { 327 transform: scale(1); 328 } 329 330 19.9% { 331 transform: scale(1); 332 } 333 334 20% { 335 transform: scale(0); 336 } 337 338 100% { 339 transform: scale(0); 340 } 341} 342 343@keyframes plate_2 { 344 0% { 345 transform: scale(0); 346 } 347 348 19.9% { 349 transform: scale(0); 350 } 351 352 20% { 353 transform: scale(1); 354 } 355 356 39.9% { 357 transform: scale(1); 358 } 359 360 40% { 361 transform: scale(0); 362 } 363 364 100% { 365 transform: scale(0); 366 } 367} 368 369@keyframes plate_3 { 370 0% { 371 transform: scale(0); 372 } 373 374 39.9% { 375 transform: scale(0); 376 } 377 378 40% { 379 transform: scale(1); 380 } 381 382 59.9% { 383 transform: scale(1); 384 } 385 386 60% { 387 transform: scale(0); 388 } 389 390 100% { 391 transform: scale(0); 392 } 393} 394 395@keyframes plate_4 { 396 0% { 397 transform: scale(0); 398 } 399 400 59.9% { 401 transform: scale(0); 402 } 403 404 60% { 405 transform: scale(1); 406 } 407 408 79.9% { 409 transform: scale(1); 410 } 411 412 80% { 413 transform: scale(0); 414 } 415 416 100% { 417 transform: scale(0); 418 } 419} 420 421@keyframes plate_5 { 422 0% { 423 transform: scale(0); 424 } 425 426 79.9% { 427 transform: scale(0); 428 } 429 430 80% { 431 transform: scale(1); 432 } 433 434 100% { 435 transform: scale(1); 436 } 437} 438 439.container { 440 width: 100%; 441 height: 100%; 442 display: flex; 443 flex-direction: column; 444 justify-content: center; 445 align-items: center; 446 background-color: #212121; 447 padding: 50px 50px 80px 50px; 448 border-radius: 10px; 449}
706 views
706 views
MIT License