Button by SelfMadeSystem
#e8e8e8
1/* 2A better ripple button. Ripples on hover too :) 3Made with Svelte and SCSS: stackblitz.com/edit/vitejs-vite-q7fgp7 4 */ 5 6.btn { 7 border-radius: 0.5em; 8 font-size: larger; 9 height: 3em; 10 width: 9em; 11 position: relative; 12 border: none; 13 background-color: hsl(218, 68%, 52%); 14 overflow: hidden; 15 isolation: isolate; 16 color: white; 17 cursor: pointer; 18 box-shadow: 1px 2px 4px #0007; 19} 20 21.btn>span { 22 position: relative; 23 pointer-events: none; 24 z-index: 10 25} 26 27.ripple-container { 28 position: absolute; 29 inset: 0; 30 display: grid; 31 grid-template-columns: repeat(36, 0.25em); 32} 33 34.ripple-container>span { 35 position: relative; 36 display: flex; 37 justify-content: center; 38 align-items: center; 39} 40 41.ripple-container>span::after { 42 content: ""; 43 pointer-events: none; 44 position: absolute; 45 background-color: #6996e2; 46 transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s; 47 width: 18.973665961em; 48 height: 18.973665961em; 49 opacity: 0; 50 border-radius: 999em 51} 52 53.ripple-container>span:active::after { 54 transition: 0s; 55 width: 0em; 56 height: 0em; 57 opacity: 1 58} 59 60.hover-ripple { 61 pointer-events: none; 62 position: absolute; 63 background-color: #6996e299; 64 transition: width 0.5s ease-out, height 0.5s ease-out, top 99999s linear, left 9999s linear; 65 transform: translate(-50%, -50%); 66 top: 0em; 67 left: 0em; 68 width: 0em; 69 height: 0em; 70 border-radius: 999em 71} 72 73.ripple-container>span:hover~.hover-ripple { 74 transition: width 0.5s ease-out, height 0.5s ease-out, top 0s linear, left 0s linear; 75 width: 18.973665961em; 76 height: 18.973665961em 77} 78 79.ripple-container>span:nth-child(1):hover~.hover-ripple { 80 top: 0.125em; 81 left: 0.1875em 82} 83 84.ripple-container>span:nth-child(37):hover~.hover-ripple { 85 top: 0.375em; 86 left: 0.1875em 87} 88 89.ripple-container>span:nth-child(73):hover~.hover-ripple { 90 top: 0.625em; 91 left: 0.1875em 92} 93 94.ripple-container>span:nth-child(109):hover~.hover-ripple { 95 top: 0.875em; 96 left: 0.1875em 97} 98 99.ripple-container>span:nth-child(145):hover~.hover-ripple { 100 top: 1.125em; 101 left: 0.1875em 102} 103 104.ripple-container>span:nth-child(181):hover~.hover-ripple { 105 top: 1.375em; 106 left: 0.1875em 107} 108 109.ripple-container>span:nth-child(217):hover~.hover-ripple { 110 top: 1.625em; 111 left: 0.1875em 112} 113 114.ripple-container>span:nth-child(253):hover~.hover-ripple { 115 top: 1.875em; 116 left: 0.1875em 117} 118 119.ripple-container>span:nth-child(289):hover~.hover-ripple { 120 top: 2.125em; 121 left: 0.1875em 122} 123 124.ripple-container>span:nth-child(325):hover~.hover-ripple { 125 top: 2.375em; 126 left: 0.1875em 127} 128 129.ripple-container>span:nth-child(361):hover~.hover-ripple { 130 top: 2.625em; 131 left: 0.1875em 132} 133 134.ripple-container>span:nth-child(397):hover~.hover-ripple { 135 top: 2.875em; 136 left: 0.1875em 137} 138 139.ripple-container>span:nth-child(2):hover~.hover-ripple { 140 top: 0.125em; 141 left: 0.4375em 142} 143 144.ripple-container>span:nth-child(38):hover~.hover-ripple { 145 top: 0.375em; 146 left: 0.4375em 147} 148 149.ripple-container>span:nth-child(74):hover~.hover-ripple { 150 top: 0.625em; 151 left: 0.4375em 152} 153 154.ripple-container>span:nth-child(110):hover~.hover-ripple { 155 top: 0.875em; 156 left: 0.4375em 157} 158 159.ripple-container>span:nth-child(146):hover~.hover-ripple { 160 top: 1.125em; 161 left: 0.4375em 162} 163 164.ripple-container>span:nth-child(182):hover~.hover-ripple { 165 top: 1.375em; 166 left: 0.4375em 167} 168 169.ripple-container>span:nth-child(218):hover~.hover-ripple { 170 top: 1.625em; 171 left: 0.4375em 172} 173 174.ripple-container>span:nth-child(254):hover~.hover-ripple { 175 top: 1.875em; 176 left: 0.4375em 177} 178 179.ripple-container>span:nth-child(290):hover~.hover-ripple { 180 top: 2.125em; 181 left: 0.4375em 182} 183 184.ripple-container>span:nth-child(326):hover~.hover-ripple { 185 top: 2.375em; 186 left: 0.4375em 187} 188 189.ripple-container>span:nth-child(362):hover~.hover-ripple { 190 top: 2.625em; 191 left: 0.4375em 192} 193 194.ripple-container>span:nth-child(398):hover~.hover-ripple { 195 top: 2.875em; 196 left: 0.4375em 197} 198 199.ripple-container>span:nth-child(3):hover~.hover-ripple { 200 top: 0.125em; 201 left: 0.6875em 202} 203 204.ripple-container>span:nth-child(39):hover~.hover-ripple { 205 top: 0.375em; 206 left: 0.6875em 207} 208 209.ripple-container>span:nth-child(75):hover~.hover-ripple { 210 top: 0.625em; 211 left: 0.6875em 212} 213 214.ripple-container>span:nth-child(111):hover~.hover-ripple { 215 top: 0.875em; 216 left: 0.6875em 217} 218 219.ripple-container>span:nth-child(147):hover~.hover-ripple { 220 top: 1.125em; 221 left: 0.6875em 222} 223 224.ripple-container>span:nth-child(183):hover~.hover-ripple { 225 top: 1.375em; 226 left: 0.6875em 227} 228 229.ripple-container>span:nth-child(219):hover~.hover-ripple { 230 top: 1.625em; 231 left: 0.6875em 232} 233 234.ripple-container>span:nth-child(255):hover~.hover-ripple { 235 top: 1.875em; 236 left: 0.6875em 237} 238 239.ripple-container>span:nth-child(291):hover~.hover-ripple { 240 top: 2.125em; 241 left: 0.6875em 242} 243 244.ripple-container>span:nth-child(327):hover~.hover-ripple { 245 top: 2.375em; 246 left: 0.6875em 247} 248 249.ripple-container>span:nth-child(363):hover~.hover-ripple { 250 top: 2.625em; 251 left: 0.6875em 252} 253 254.ripple-container>span:nth-child(399):hover~.hover-ripple { 255 top: 2.875em; 256 left: 0.6875em 257} 258 259.ripple-container>span:nth-child(4):hover~.hover-ripple { 260 top: 0.125em; 261 left: 0.9375em 262} 263 264.ripple-container>span:nth-child(40):hover~.hover-ripple { 265 top: 0.375em; 266 left: 0.9375em 267} 268 269.ripple-container>span:nth-child(76):hover~.hover-ripple { 270 top: 0.625em; 271 left: 0.9375em 272} 273 274.ripple-container>span:nth-child(112):hover~.hover-ripple { 275 top: 0.875em; 276 left: 0.9375em 277} 278 279.ripple-container>span:nth-child(148):hover~.hover-ripple { 280 top: 1.125em; 281 left: 0.9375em 282} 283 284.ripple-container>span:nth-child(184):hover~.hover-ripple { 285 top: 1.375em; 286 left: 0.9375em 287} 288 289.ripple-container>span:nth-child(220):hover~.hover-ripple { 290 top: 1.625em; 291 left: 0.9375em 292} 293 294.ripple-container>span:nth-child(256):hover~.hover-ripple { 295 top: 1.875em; 296 left: 0.9375em 297} 298 299.ripple-container>span:nth-child(292):hover~.hover-ripple { 300 top: 2.125em; 301 left: 0.9375em 302} 303 304.ripple-container>span:nth-child(328):hover~.hover-ripple { 305 top: 2.375em; 306 left: 0.9375em 307} 308 309.ripple-container>span:nth-child(364):hover~.hover-ripple { 310 top: 2.625em; 311 left: 0.9375em 312} 313 314.ripple-container>span:nth-child(400):hover~.hover-ripple { 315 top: 2.875em; 316 left: 0.9375em 317} 318 319.ripple-container>span:nth-child(5):hover~.hover-ripple { 320 top: 0.125em; 321 left: 1.1875em 322} 323 324.ripple-container>span:nth-child(41):hover~.hover-ripple { 325 top: 0.375em; 326 left: 1.1875em 327} 328 329.ripple-container>span:nth-child(77):hover~.hover-ripple { 330 top: 0.625em; 331 left: 1.1875em 332} 333 334.ripple-container>span:nth-child(113):hover~.hover-ripple { 335 top: 0.875em; 336 left: 1.1875em 337} 338 339.ripple-container>span:nth-child(149):hover~.hover-ripple { 340 top: 1.125em; 341 left: 1.1875em 342} 343 344.ripple-container>span:nth-child(185):hover~.hover-ripple { 345 top: 1.375em; 346 left: 1.1875em 347} 348 349.ripple-container>span:nth-child(221):hover~.hover-ripple { 350 top: 1.625em; 351 left: 1.1875em 352} 353 354.ripple-container>span:nth-child(257):hover~.hover-ripple { 355 top: 1.875em; 356 left: 1.1875em 357} 358 359.ripple-container>span:nth-child(293):hover~.hover-ripple { 360 top: 2.125em; 361 left: 1.1875em 362} 363 364.ripple-container>span:nth-child(329):hover~.hover-ripple { 365 top: 2.375em; 366 left: 1.1875em 367} 368 369.ripple-container>span:nth-child(365):hover~.hover-ripple { 370 top: 2.625em; 371 left: 1.1875em 372} 373 374.ripple-container>span:nth-child(401):hover~.hover-ripple { 375 top: 2.875em; 376 left: 1.1875em 377} 378 379.ripple-container>span:nth-child(6):hover~.hover-ripple { 380 top: 0.125em; 381 left: 1.4375em 382} 383 384.ripple-container>span:nth-child(42):hover~.hover-ripple { 385 top: 0.375em; 386 left: 1.4375em 387} 388 389.ripple-container>span:nth-child(78):hover~.hover-ripple { 390 top: 0.625em; 391 left: 1.4375em 392} 393 394.ripple-container>span:nth-child(114):hover~.hover-ripple { 395 top: 0.875em; 396 left: 1.4375em 397} 398 399.ripple-container>span:nth-child(150):hover~.hover-ripple { 400 top: 1.125em; 401 left: 1.4375em 402} 403 404.ripple-container>span:nth-child(186):hover~.hover-ripple { 405 top: 1.375em; 406 left: 1.4375em 407} 408 409.ripple-container>span:nth-child(222):hover~.hover-ripple { 410 top: 1.625em; 411 left: 1.4375em 412} 413 414.ripple-container>span:nth-child(258):hover~.hover-ripple { 415 top: 1.875em; 416 left: 1.4375em 417} 418 419.ripple-container>span:nth-child(294):hover~.hover-ripple { 420 top: 2.125em; 421 left: 1.4375em 422} 423 424.ripple-container>span:nth-child(330):hover~.hover-ripple { 425 top: 2.375em; 426 left: 1.4375em 427} 428 429.ripple-container>span:nth-child(366):hover~.hover-ripple { 430 top: 2.625em; 431 left: 1.4375em 432} 433 434.ripple-container>span:nth-child(402):hover~.hover-ripple { 435 top: 2.875em; 436 left: 1.4375em 437} 438 439.ripple-container>span:nth-child(7):hover~.hover-ripple { 440 top: 0.125em; 441 left: 1.6875em 442} 443 444.ripple-container>span:nth-child(43):hover~.hover-ripple { 445 top: 0.375em; 446 left: 1.6875em 447} 448 449.ripple-container>span:nth-child(79):hover~.hover-ripple { 450 top: 0.625em; 451 left: 1.6875em 452} 453 454.ripple-container>span:nth-child(115):hover~.hover-ripple { 455 top: 0.875em; 456 left: 1.6875em 457} 458 459.ripple-container>span:nth-child(151):hover~.hover-ripple { 460 top: 1.125em; 461 left: 1.6875em 462} 463 464.ripple-container>span:nth-child(187):hover~.hover-ripple { 465 top: 1.375em; 466 left: 1.6875em 467} 468 469.ripple-container>span:nth-child(223):hover~.hover-ripple { 470 top: 1.625em; 471 left: 1.6875em 472} 473 474.ripple-container>span:nth-child(259):hover~.hover-ripple { 475 top: 1.875em; 476 left: 1.6875em 477} 478 479.ripple-container>span:nth-child(295):hover~.hover-ripple { 480 top: 2.125em; 481 left: 1.6875em 482} 483 484.ripple-container>span:nth-child(331):hover~.hover-ripple { 485 top: 2.375em; 486 left: 1.6875em 487} 488 489.ripple-container>span:nth-child(367):hover~.hover-ripple { 490 top: 2.625em; 491 left: 1.6875em 492} 493 494.ripple-container>span:nth-child(403):hover~.hover-ripple { 495 top: 2.875em; 496 left: 1.6875em 497} 498 499.ripple-container>span:nth-child(8):hover~.hover-ripple { 500 top: 0.125em; 501 left: 1.9375em 502} 503 504.ripple-container>span:nth-child(44):hover~.hover-ripple { 505 top: 0.375em; 506 left: 1.9375em 507} 508 509.ripple-container>span:nth-child(80):hover~.hover-ripple { 510 top: 0.625em; 511 left: 1.9375em 512} 513 514.ripple-container>span:nth-child(116):hover~.hover-ripple { 515 top: 0.875em; 516 left: 1.9375em 517} 518 519.ripple-container>span:nth-child(152):hover~.hover-ripple { 520 top: 1.125em; 521 left: 1.9375em 522} 523 524.ripple-container>span:nth-child(188):hover~.hover-ripple { 525 top: 1.375em; 526 left: 1.9375em 527} 528 529.ripple-container>span:nth-child(224):hover~.hover-ripple { 530 top: 1.625em; 531 left: 1.9375em 532} 533 534.ripple-container>span:nth-child(260):hover~.hover-ripple { 535 top: 1.875em; 536 left: 1.9375em 537} 538 539.ripple-container>span:nth-child(296):hover~.hover-ripple { 540 top: 2.125em; 541 left: 1.9375em 542} 543 544.ripple-container>span:nth-child(332):hover~.hover-ripple { 545 top: 2.375em; 546 left: 1.9375em 547} 548 549.ripple-container>span:nth-child(368):hover~.hover-ripple { 550 top: 2.625em; 551 left: 1.9375em 552} 553 554.ripple-container>span:nth-child(404):hover~.hover-ripple { 555 top: 2.875em; 556 left: 1.9375em 557} 558 559.ripple-container>span:nth-child(9):hover~.hover-ripple { 560 top: 0.125em; 561 left: 2.1875em 562} 563 564.ripple-container>span:nth-child(45):hover~.hover-ripple { 565 top: 0.375em; 566 left: 2.1875em 567} 568 569.ripple-container>span:nth-child(81):hover~.hover-ripple { 570 top: 0.625em; 571 left: 2.1875em 572} 573 574.ripple-container>span:nth-child(117):hover~.hover-ripple { 575 top: 0.875em; 576 left: 2.1875em 577} 578 579.ripple-container>span:nth-child(153):hover~.hover-ripple { 580 top: 1.125em; 581 left: 2.1875em 582} 583 584.ripple-container>span:nth-child(189):hover~.hover-ripple { 585 top: 1.375em; 586 left: 2.1875em 587} 588 589.ripple-container>span:nth-child(225):hover~.hover-ripple { 590 top: 1.625em; 591 left: 2.1875em 592} 593 594.ripple-container>span:nth-child(261):hover~.hover-ripple { 595 top: 1.875em; 596 left: 2.1875em 597} 598 599.ripple-container>span:nth-child(297):hover~.hover-ripple { 600 top: 2.125em; 601 left: 2.1875em 602} 603 604.ripple-container>span:nth-child(333):hover~.hover-ripple { 605 top: 2.375em; 606 left: 2.1875em 607} 608 609.ripple-container>span:nth-child(369):hover~.hover-ripple { 610 top: 2.625em; 611 left: 2.1875em 612} 613 614.ripple-container>span:nth-child(405):hover~.hover-ripple { 615 top: 2.875em; 616 left: 2.1875em 617} 618 619.ripple-container>span:nth-child(10):hover~.hover-ripple { 620 top: 0.125em; 621 left: 2.4375em 622} 623 624.ripple-container>span:nth-child(46):hover~.hover-ripple { 625 top: 0.375em; 626 left: 2.4375em 627} 628 629.ripple-container>span:nth-child(82):hover~.hover-ripple { 630 top: 0.625em; 631 left: 2.4375em 632} 633 634.ripple-container>span:nth-child(118):hover~.hover-ripple { 635 top: 0.875em; 636 left: 2.4375em 637} 638 639.ripple-container>span:nth-child(154):hover~.hover-ripple { 640 top: 1.125em; 641 left: 2.4375em 642} 643 644.ripple-container>span:nth-child(190):hover~.hover-ripple { 645 top: 1.375em; 646 left: 2.4375em 647} 648 649.ripple-container>span:nth-child(226):hover~.hover-ripple { 650 top: 1.625em; 651 left: 2.4375em 652} 653 654.ripple-container>span:nth-child(262):hover~.hover-ripple { 655 top: 1.875em; 656 left: 2.4375em 657} 658 659.ripple-container>span:nth-child(298):hover~.hover-ripple { 660 top: 2.125em; 661 left: 2.4375em 662} 663 664.ripple-container>span:nth-child(334):hover~.hover-ripple { 665 top: 2.375em; 666 left: 2.4375em 667} 668 669.ripple-container>span:nth-child(370):hover~.hover-ripple { 670 top: 2.625em; 671 left: 2.4375em 672} 673 674.ripple-container>span:nth-child(406):hover~.hover-ripple { 675 top: 2.875em; 676 left: 2.4375em 677} 678 679.ripple-container>span:nth-child(11):hover~.hover-ripple { 680 top: 0.125em; 681 left: 2.6875em 682} 683 684.ripple-container>span:nth-child(47):hover~.hover-ripple { 685 top: 0.375em; 686 left: 2.6875em 687} 688 689.ripple-container>span:nth-child(83):hover~.hover-ripple { 690 top: 0.625em; 691 left: 2.6875em 692} 693 694.ripple-container>span:nth-child(119):hover~.hover-ripple { 695 top: 0.875em; 696 left: 2.6875em 697} 698 699.ripple-container>span:nth-child(155):hover~.hover-ripple { 700 top: 1.125em; 701 left: 2.6875em 702} 703 704.ripple-container>span:nth-child(191):hover~.hover-ripple { 705 top: 1.375em; 706 left: 2.6875em 707} 708 709.ripple-container>span:nth-child(227):hover~.hover-ripple { 710 top: 1.625em; 711 left: 2.6875em 712} 713 714.ripple-container>span:nth-child(263):hover~.hover-ripple { 715 top: 1.875em; 716 left: 2.6875em 717} 718 719.ripple-container>span:nth-child(299):hover~.hover-ripple { 720 top: 2.125em; 721 left: 2.6875em 722} 723 724.ripple-container>span:nth-child(335):hover~.hover-ripple { 725 top: 2.375em; 726 left: 2.6875em 727} 728 729.ripple-container>span:nth-child(371):hover~.hover-ripple { 730 top: 2.625em; 731 left: 2.6875em 732} 733 734.ripple-container>span:nth-child(407):hover~.hover-ripple { 735 top: 2.875em; 736 left: 2.6875em 737} 738 739.ripple-container>span:nth-child(12):hover~.hover-ripple { 740 top: 0.125em; 741 left: 2.9375em 742} 743 744.ripple-container>span:nth-child(48):hover~.hover-ripple { 745 top: 0.375em; 746 left: 2.9375em 747} 748 749.ripple-container>span:nth-child(84):hover~.hover-ripple { 750 top: 0.625em; 751 left: 2.9375em 752} 753 754.ripple-container>span:nth-child(120):hover~.hover-ripple { 755 top: 0.875em; 756 left: 2.9375em 757} 758 759.ripple-container>span:nth-child(156):hover~.hover-ripple { 760 top: 1.125em; 761 left: 2.9375em 762} 763 764.ripple-container>span:nth-child(192):hover~.hover-ripple { 765 top: 1.375em; 766 left: 2.9375em 767} 768 769.ripple-container>span:nth-child(228):hover~.hover-ripple { 770 top: 1.625em; 771 left: 2.9375em 772} 773 774.ripple-container>span:nth-child(264):hover~.hover-ripple { 775 top: 1.875em; 776 left: 2.9375em 777} 778 779.ripple-container>span:nth-child(300):hover~.hover-ripple { 780 top: 2.125em; 781 left: 2.9375em 782} 783 784.ripple-container>span:nth-child(336):hover~.hover-ripple { 785 top: 2.375em; 786 left: 2.9375em 787} 788 789.ripple-container>span:nth-child(372):hover~.hover-ripple { 790 top: 2.625em; 791 left: 2.9375em 792} 793 794.ripple-container>span:nth-child(408):hover~.hover-ripple { 795 top: 2.875em; 796 left: 2.9375em 797} 798 799.ripple-container>span:nth-child(13):hover~.hover-ripple { 800 top: 0.125em; 801 left: 3.1875em 802} 803 804.ripple-container>span:nth-child(49):hover~.hover-ripple { 805 top: 0.375em; 806 left: 3.1875em 807} 808 809.ripple-container>span:nth-child(85):hover~.hover-ripple { 810 top: 0.625em; 811 left: 3.1875em 812} 813 814.ripple-container>span:nth-child(121):hover~.hover-ripple { 815 top: 0.875em; 816 left: 3.1875em 817} 818 819.ripple-container>span:nth-child(157):hover~.hover-ripple { 820 top: 1.125em; 821 left: 3.1875em 822} 823 824.ripple-container>span:nth-child(193):hover~.hover-ripple { 825 top: 1.375em; 826 left: 3.1875em 827} 828 829.ripple-container>span:nth-child(229):hover~.hover-ripple { 830 top: 1.625em; 831 left: 3.1875em 832} 833 834.ripple-container>span:nth-child(265):hover~.hover-ripple { 835 top: 1.875em; 836 left: 3.1875em 837} 838 839.ripple-container>span:nth-child(301):hover~.hover-ripple { 840 top: 2.125em; 841 left: 3.1875em 842} 843 844.ripple-container>span:nth-child(337):hover~.hover-ripple { 845 top: 2.375em; 846 left: 3.1875em 847} 848 849.ripple-container>span:nth-child(373):hover~.hover-ripple { 850 top: 2.625em; 851 left: 3.1875em 852} 853 854.ripple-container>span:nth-child(409):hover~.hover-ripple { 855 top: 2.875em; 856 left: 3.1875em 857} 858 859.ripple-container>span:nth-child(14):hover~.hover-ripple { 860 top: 0.125em; 861 left: 3.4375em 862} 863 864.ripple-container>span:nth-child(50):hover~.hover-ripple { 865 top: 0.375em; 866 left: 3.4375em 867} 868 869.ripple-container>span:nth-child(86):hover~.hover-ripple { 870 top: 0.625em; 871 left: 3.4375em 872} 873 874.ripple-container>span:nth-child(122):hover~.hover-ripple { 875 top: 0.875em; 876 left: 3.4375em 877} 878 879.ripple-container>span:nth-child(158):hover~.hover-ripple { 880 top: 1.125em; 881 left: 3.4375em 882} 883 884.ripple-container>span:nth-child(194):hover~.hover-ripple { 885 top: 1.375em; 886 left: 3.4375em 887} 888 889.ripple-container>span:nth-child(230):hover~.hover-ripple { 890 top: 1.625em; 891 left: 3.4375em 892} 893 894.ripple-container>span:nth-child(266):hover~.hover-ripple { 895 top: 1.875em; 896 left: 3.4375em 897} 898 899.ripple-container>span:nth-child(302):hover~.hover-ripple { 900 top: 2.125em; 901 left: 3.4375em 902} 903 904.ripple-container>span:nth-child(338):hover~.hover-ripple { 905 top: 2.375em; 906 left: 3.4375em 907} 908 909.ripple-container>span:nth-child(374):hover~.hover-ripple { 910 top: 2.625em; 911 left: 3.4375em 912} 913 914.ripple-container>span:nth-child(410):hover~.hover-ripple { 915 top: 2.875em; 916 left: 3.4375em 917} 918 919.ripple-container>span:nth-child(15):hover~.hover-ripple { 920 top: 0.125em; 921 left: 3.6875em 922} 923 924.ripple-container>span:nth-child(51):hover~.hover-ripple { 925 top: 0.375em; 926 left: 3.6875em 927} 928 929.ripple-container>span:nth-child(87):hover~.hover-ripple { 930 top: 0.625em; 931 left: 3.6875em 932} 933 934.ripple-container>span:nth-child(123):hover~.hover-ripple { 935 top: 0.875em; 936 left: 3.6875em 937} 938 939.ripple-container>span:nth-child(159):hover~.hover-ripple { 940 top: 1.125em; 941 left: 3.6875em 942} 943 944.ripple-container>span:nth-child(195):hover~.hover-ripple { 945 top: 1.375em; 946 left: 3.6875em 947} 948 949.ripple-container>span:nth-child(231):hover~.hover-ripple { 950 top: 1.625em; 951 left: 3.6875em 952} 953 954.ripple-container>span:nth-child(267):hover~.hover-ripple { 955 top: 1.875em; 956 left: 3.6875em 957} 958 959.ripple-container>span:nth-child(303):hover~.hover-ripple { 960 top: 2.125em; 961 left: 3.6875em 962} 963 964.ripple-container>span:nth-child(339):hover~.hover-ripple { 965 top: 2.375em; 966 left: 3.6875em 967} 968 969.ripple-container>span:nth-child(375):hover~.hover-ripple { 970 top: 2.625em; 971 left: 3.6875em 972} 973 974.ripple-container>span:nth-child(411):hover~.hover-ripple { 975 top: 2.875em; 976 left: 3.6875em 977} 978 979.ripple-container>span:nth-child(16):hover~.hover-ripple { 980 top: 0.125em; 981 left: 3.9375em 982} 983 984.ripple-container>span:nth-child(52):hover~.hover-ripple { 985 top: 0.375em; 986 left: 3.9375em 987} 988 989.ripple-container>span:nth-child(88):hover~.hover-ripple { 990 top: 0.625em; 991 left: 3.9375em 992} 993 994.ripple-container>span:nth-child(124):hover~.hover-ripple { 995 top: 0.875em; 996 left: 3.9375em 997} 998 999.ripple-container>span:nth-child(160):hover~.hover-ripple { 1000 top: 1.125em; 1001 left: 3.9375em 1002} 1003 1004.ripple-container>span:nth-child(196):hover~.hover-ripple { 1005 top: 1.375em; 1006 left: 3.9375em 1007} 1008 1009.ripple-container>span:nth-child(232):hover~.hover-ripple { 1010 top: 1.625em; 1011 left: 3.9375em 1012} 1013 1014.ripple-container>span:nth-child(268):hover~.hover-ripple { 1015 top: 1.875em; 1016 left: 3.9375em 1017} 1018 1019.ripple-container>span:nth-child(304):hover~.hover-ripple { 1020 top: 2.125em; 1021 left: 3.9375em 1022} 1023 1024.ripple-container>span:nth-child(340):hover~.hover-ripple { 1025 top: 2.375em; 1026 left: 3.9375em 1027} 1028 1029.ripple-container>span:nth-child(376):hover~.hover-ripple { 1030 top: 2.625em; 1031 left: 3.9375em 1032} 1033 1034.ripple-container>span:nth-child(412):hover~.hover-ripple { 1035 top: 2.875em; 1036 left: 3.9375em 1037} 1038 1039.ripple-container>span:nth-child(17):hover~.hover-ripple { 1040 top: 0.125em; 1041 left: 4.1875em 1042} 1043 1044.ripple-container>span:nth-child(53):hover~.hover-ripple { 1045 top: 0.375em; 1046 left: 4.1875em 1047} 1048 1049.ripple-container>span:nth-child(89):hover~.hover-ripple { 1050 top: 0.625em; 1051 left: 4.1875em 1052} 1053 1054.ripple-container>span:nth-child(125):hover~.hover-ripple { 1055 top: 0.875em; 1056 left: 4.1875em 1057} 1058 1059.ripple-container>span:nth-child(161):hover~.hover-ripple { 1060 top: 1.125em; 1061 left: 4.1875em 1062} 1063 1064.ripple-container>span:nth-child(197):hover~.hover-ripple { 1065 top: 1.375em; 1066 left: 4.1875em 1067} 1068 1069.ripple-container>span:nth-child(233):hover~.hover-ripple { 1070 top: 1.625em; 1071 left: 4.1875em 1072} 1073 1074.ripple-container>span:nth-child(269):hover~.hover-ripple { 1075 top: 1.875em; 1076 left: 4.1875em 1077} 1078 1079.ripple-container>span:nth-child(305):hover~.hover-ripple { 1080 top: 2.125em; 1081 left: 4.1875em 1082} 1083 1084.ripple-container>span:nth-child(341):hover~.hover-ripple { 1085 top: 2.375em; 1086 left: 4.1875em 1087} 1088 1089.ripple-container>span:nth-child(377):hover~.hover-ripple { 1090 top: 2.625em; 1091 left: 4.1875em 1092} 1093 1094.ripple-container>span:nth-child(413):hover~.hover-ripple { 1095 top: 2.875em; 1096 left: 4.1875em 1097} 1098 1099.ripple-container>span:nth-child(18):hover~.hover-ripple { 1100 top: 0.125em; 1101 left: 4.4375em 1102} 1103 1104.ripple-container>span:nth-child(54):hover~.hover-ripple { 1105 top: 0.375em; 1106 left: 4.4375em 1107} 1108 1109.ripple-container>span:nth-child(90):hover~.hover-ripple { 1110 top: 0.625em; 1111 left: 4.4375em 1112} 1113 1114.ripple-container>span:nth-child(126):hover~.hover-ripple { 1115 top: 0.875em; 1116 left: 4.4375em 1117} 1118 1119.ripple-container>span:nth-child(162):hover~.hover-ripple { 1120 top: 1.125em; 1121 left: 4.4375em 1122} 1123 1124.ripple-container>span:nth-child(198):hover~.hover-ripple { 1125 top: 1.375em; 1126 left: 4.4375em 1127} 1128 1129.ripple-container>span:nth-child(234):hover~.hover-ripple { 1130 top: 1.625em; 1131 left: 4.4375em 1132} 1133 1134.ripple-container>span:nth-child(270):hover~.hover-ripple { 1135 top: 1.875em; 1136 left: 4.4375em 1137} 1138 1139.ripple-container>span:nth-child(306):hover~.hover-ripple { 1140 top: 2.125em; 1141 left: 4.4375em 1142} 1143 1144.ripple-container>span:nth-child(342):hover~.hover-ripple { 1145 top: 2.375em; 1146 left: 4.4375em 1147} 1148 1149.ripple-container>span:nth-child(378):hover~.hover-ripple { 1150 top: 2.625em; 1151 left: 4.4375em 1152} 1153 1154.ripple-container>span:nth-child(414):hover~.hover-ripple { 1155 top: 2.875em; 1156 left: 4.4375em 1157} 1158 1159.ripple-container>span:nth-child(19):hover~.hover-ripple { 1160 top: 0.125em; 1161 left: 4.6875em 1162} 1163 1164.ripple-container>span:nth-child(55):hover~.hover-ripple { 1165 top: 0.375em; 1166 left: 4.6875em 1167} 1168 1169.ripple-container>span:nth-child(91):hover~.hover-ripple { 1170 top: 0.625em; 1171 left: 4.6875em 1172} 1173 1174.ripple-container>span:nth-child(127):hover~.hover-ripple { 1175 top: 0.875em; 1176 left: 4.6875em 1177} 1178 1179.ripple-container>span:nth-child(163):hover~.hover-ripple { 1180 top: 1.125em; 1181 left: 4.6875em 1182} 1183 1184.ripple-container>span:nth-child(199):hover~.hover-ripple { 1185 top: 1.375em; 1186 left: 4.6875em 1187} 1188 1189.ripple-container>span:nth-child(235):hover~.hover-ripple { 1190 top: 1.625em; 1191 left: 4.6875em 1192} 1193 1194.ripple-container>span:nth-child(271):hover~.hover-ripple { 1195 top: 1.875em; 1196 left: 4.6875em 1197} 1198 1199.ripple-container>span:nth-child(307):hover~.hover-ripple { 1200 top: 2.125em; 1201 left: 4.6875em 1202} 1203 1204.ripple-container>span:nth-child(343):hover~.hover-ripple { 1205 top: 2.375em; 1206 left: 4.6875em 1207} 1208 1209.ripple-container>span:nth-child(379):hover~.hover-ripple { 1210 top: 2.625em; 1211 left: 4.6875em 1212} 1213 1214.ripple-container>span:nth-child(415):hover~.hover-ripple { 1215 top: 2.875em; 1216 left: 4.6875em 1217} 1218 1219.ripple-container>span:nth-child(20):hover~.hover-ripple { 1220 top: 0.125em; 1221 left: 4.9375em 1222} 1223 1224.ripple-container>span:nth-child(56):hover~.hover-ripple { 1225 top: 0.375em; 1226 left: 4.9375em 1227} 1228 1229.ripple-container>span:nth-child(92):hover~.hover-ripple { 1230 top: 0.625em; 1231 left: 4.9375em 1232} 1233 1234.ripple-container>span:nth-child(128):hover~.hover-ripple { 1235 top: 0.875em; 1236 left: 4.9375em 1237} 1238 1239.ripple-container>span:nth-child(164):hover~.hover-ripple { 1240 top: 1.125em; 1241 left: 4.9375em 1242} 1243 1244.ripple-container>span:nth-child(200):hover~.hover-ripple { 1245 top: 1.375em; 1246 left: 4.9375em 1247} 1248 1249.ripple-container>span:nth-child(236):hover~.hover-ripple { 1250 top: 1.625em; 1251 left: 4.9375em 1252} 1253 1254.ripple-container>span:nth-child(272):hover~.hover-ripple { 1255 top: 1.875em; 1256 left: 4.9375em 1257} 1258 1259.ripple-container>span:nth-child(308):hover~.hover-ripple { 1260 top: 2.125em; 1261 left: 4.9375em 1262} 1263 1264.ripple-container>span:nth-child(344):hover~.hover-ripple { 1265 top: 2.375em; 1266 left: 4.9375em 1267} 1268 1269.ripple-container>span:nth-child(380):hover~.hover-ripple { 1270 top: 2.625em; 1271 left: 4.9375em 1272} 1273 1274.ripple-container>span:nth-child(416):hover~.hover-ripple { 1275 top: 2.875em; 1276 left: 4.9375em 1277} 1278 1279.ripple-container>span:nth-child(21):hover~.hover-ripple { 1280 top: 0.125em; 1281 left: 5.1875em 1282} 1283 1284.ripple-container>span:nth-child(57):hover~.hover-ripple { 1285 top: 0.375em; 1286 left: 5.1875em 1287} 1288 1289.ripple-container>span:nth-child(93):hover~.hover-ripple { 1290 top: 0.625em; 1291 left: 5.1875em 1292} 1293 1294.ripple-container>span:nth-child(129):hover~.hover-ripple { 1295 top: 0.875em; 1296 left: 5.1875em 1297} 1298 1299.ripple-container>span:nth-child(165):hover~.hover-ripple { 1300 top: 1.125em; 1301 left: 5.1875em 1302} 1303 1304.ripple-container>span:nth-child(201):hover~.hover-ripple { 1305 top: 1.375em; 1306 left: 5.1875em 1307} 1308 1309.ripple-container>span:nth-child(237):hover~.hover-ripple { 1310 top: 1.625em; 1311 left: 5.1875em 1312} 1313 1314.ripple-container>span:nth-child(273):hover~.hover-ripple { 1315 top: 1.875em; 1316 left: 5.1875em 1317} 1318 1319.ripple-container>span:nth-child(309):hover~.hover-ripple { 1320 top: 2.125em; 1321 left: 5.1875em 1322} 1323 1324.ripple-container>span:nth-child(345):hover~.hover-ripple { 1325 top: 2.375em; 1326 left: 5.1875em 1327} 1328 1329.ripple-container>span:nth-child(381):hover~.hover-ripple { 1330 top: 2.625em; 1331 left: 5.1875em 1332} 1333 1334.ripple-container>span:nth-child(417):hover~.hover-ripple { 1335 top: 2.875em; 1336 left: 5.1875em 1337} 1338 1339.ripple-container>span:nth-child(22):hover~.hover-ripple { 1340 top: 0.125em; 1341 left: 5.4375em 1342} 1343 1344.ripple-container>span:nth-child(58):hover~.hover-ripple { 1345 top: 0.375em; 1346 left: 5.4375em 1347} 1348 1349.ripple-container>span:nth-child(94):hover~.hover-ripple { 1350 top: 0.625em; 1351 left: 5.4375em 1352} 1353 1354.ripple-container>span:nth-child(130):hover~.hover-ripple { 1355 top: 0.875em; 1356 left: 5.4375em 1357} 1358 1359.ripple-container>span:nth-child(166):hover~.hover-ripple { 1360 top: 1.125em; 1361 left: 5.4375em 1362} 1363 1364.ripple-container>span:nth-child(202):hover~.hover-ripple { 1365 top: 1.375em; 1366 left: 5.4375em 1367} 1368 1369.ripple-container>span:nth-child(238):hover~.hover-ripple { 1370 top: 1.625em; 1371 left: 5.4375em 1372} 1373 1374.ripple-container>span:nth-child(274):hover~.hover-ripple { 1375 top: 1.875em; 1376 left: 5.4375em 1377} 1378 1379.ripple-container>span:nth-child(310):hover~.hover-ripple { 1380 top: 2.125em; 1381 left: 5.4375em 1382} 1383 1384.ripple-container>span:nth-child(346):hover~.hover-ripple { 1385 top: 2.375em; 1386 left: 5.4375em 1387} 1388 1389.ripple-container>span:nth-child(382):hover~.hover-ripple { 1390 top: 2.625em; 1391 left: 5.4375em 1392} 1393 1394.ripple-container>span:nth-child(418):hover~.hover-ripple { 1395 top: 2.875em; 1396 left: 5.4375em 1397} 1398 1399.ripple-container>span:nth-child(23):hover~.hover-ripple { 1400 top: 0.125em; 1401 left: 5.6875em 1402} 1403 1404.ripple-container>span:nth-child(59):hover~.hover-ripple { 1405 top: 0.375em; 1406 left: 5.6875em 1407} 1408 1409.ripple-container>span:nth-child(95):hover~.hover-ripple { 1410 top: 0.625em; 1411 left: 5.6875em 1412} 1413 1414.ripple-container>span:nth-child(131):hover~.hover-ripple { 1415 top: 0.875em; 1416 left: 5.6875em 1417} 1418 1419.ripple-container>span:nth-child(167):hover~.hover-ripple { 1420 top: 1.125em; 1421 left: 5.6875em 1422} 1423 1424.ripple-container>span:nth-child(203):hover~.hover-ripple { 1425 top: 1.375em; 1426 left: 5.6875em 1427} 1428 1429.ripple-container>span:nth-child(239):hover~.hover-ripple { 1430 top: 1.625em; 1431 left: 5.6875em 1432} 1433 1434.ripple-container>span:nth-child(275):hover~.hover-ripple { 1435 top: 1.875em; 1436 left: 5.6875em 1437} 1438 1439.ripple-container>span:nth-child(311):hover~.hover-ripple { 1440 top: 2.125em; 1441 left: 5.6875em 1442} 1443 1444.ripple-container>span:nth-child(347):hover~.hover-ripple { 1445 top: 2.375em; 1446 left: 5.6875em 1447} 1448 1449.ripple-container>span:nth-child(383):hover~.hover-ripple { 1450 top: 2.625em; 1451 left: 5.6875em 1452} 1453 1454.ripple-container>span:nth-child(419):hover~.hover-ripple { 1455 top: 2.875em; 1456 left: 5.6875em 1457} 1458 1459.ripple-container>span:nth-child(24):hover~.hover-ripple { 1460 top: 0.125em; 1461 left: 5.9375em 1462} 1463 1464.ripple-container>span:nth-child(60):hover~.hover-ripple { 1465 top: 0.375em; 1466 left: 5.9375em 1467} 1468 1469.ripple-container>span:nth-child(96):hover~.hover-ripple { 1470 top: 0.625em; 1471 left: 5.9375em 1472} 1473 1474.ripple-container>span:nth-child(132):hover~.hover-ripple { 1475 top: 0.875em; 1476 left: 5.9375em 1477} 1478 1479.ripple-container>span:nth-child(168):hover~.hover-ripple { 1480 top: 1.125em; 1481 left: 5.9375em 1482} 1483 1484.ripple-container>span:nth-child(204):hover~.hover-ripple { 1485 top: 1.375em; 1486 left: 5.9375em 1487} 1488 1489.ripple-container>span:nth-child(240):hover~.hover-ripple { 1490 top: 1.625em; 1491 left: 5.9375em 1492} 1493 1494.ripple-container>span:nth-child(276):hover~.hover-ripple { 1495 top: 1.875em; 1496 left: 5.9375em 1497} 1498 1499.ripple-container>span:nth-child(312):hover~.hover-ripple { 1500 top: 2.125em; 1501 left: 5.9375em 1502} 1503 1504.ripple-container>span:nth-child(348):hover~.hover-ripple { 1505 top: 2.375em; 1506 left: 5.9375em 1507} 1508 1509.ripple-container>span:nth-child(384):hover~.hover-ripple { 1510 top: 2.625em; 1511 left: 5.9375em 1512} 1513 1514.ripple-container>span:nth-child(420):hover~.hover-ripple { 1515 top: 2.875em; 1516 left: 5.9375em 1517} 1518 1519.ripple-container>span:nth-child(25):hover~.hover-ripple { 1520 top: 0.125em; 1521 left: 6.1875em 1522} 1523 1524.ripple-container>span:nth-child(61):hover~.hover-ripple { 1525 top: 0.375em; 1526 left: 6.1875em 1527} 1528 1529.ripple-container>span:nth-child(97):hover~.hover-ripple { 1530 top: 0.625em; 1531 left: 6.1875em 1532} 1533 1534.ripple-container>span:nth-child(133):hover~.hover-ripple { 1535 top: 0.875em; 1536 left: 6.1875em 1537} 1538 1539.ripple-container>span:nth-child(169):hover~.hover-ripple { 1540 top: 1.125em; 1541 left: 6.1875em 1542} 1543 1544.ripple-container>span:nth-child(205):hover~.hover-ripple { 1545 top: 1.375em; 1546 left: 6.1875em 1547} 1548 1549.ripple-container>span:nth-child(241):hover~.hover-ripple { 1550 top: 1.625em; 1551 left: 6.1875em 1552} 1553 1554.ripple-container>span:nth-child(277):hover~.hover-ripple { 1555 top: 1.875em; 1556 left: 6.1875em 1557} 1558 1559.ripple-container>span:nth-child(313):hover~.hover-ripple { 1560 top: 2.125em; 1561 left: 6.1875em 1562} 1563 1564.ripple-container>span:nth-child(349):hover~.hover-ripple { 1565 top: 2.375em; 1566 left: 6.1875em 1567} 1568 1569.ripple-container>span:nth-child(385):hover~.hover-ripple { 1570 top: 2.625em; 1571 left: 6.1875em 1572} 1573 1574.ripple-container>span:nth-child(421):hover~.hover-ripple { 1575 top: 2.875em; 1576 left: 6.1875em 1577} 1578 1579.ripple-container>span:nth-child(26):hover~.hover-ripple { 1580 top: 0.125em; 1581 left: 6.4375em 1582} 1583 1584.ripple-container>span:nth-child(62):hover~.hover-ripple { 1585 top: 0.375em; 1586 left: 6.4375em 1587} 1588 1589.ripple-container>span:nth-child(98):hover~.hover-ripple { 1590 top: 0.625em; 1591 left: 6.4375em 1592} 1593 1594.ripple-container>span:nth-child(134):hover~.hover-ripple { 1595 top: 0.875em; 1596 left: 6.4375em 1597} 1598 1599.ripple-container>span:nth-child(170):hover~.hover-ripple { 1600 top: 1.125em; 1601 left: 6.4375em 1602} 1603 1604.ripple-container>span:nth-child(206):hover~.hover-ripple { 1605 top: 1.375em; 1606 left: 6.4375em 1607} 1608 1609.ripple-container>span:nth-child(242):hover~.hover-ripple { 1610 top: 1.625em; 1611 left: 6.4375em 1612} 1613 1614.ripple-container>span:nth-child(278):hover~.hover-ripple { 1615 top: 1.875em; 1616 left: 6.4375em 1617} 1618 1619.ripple-container>span:nth-child(314):hover~.hover-ripple { 1620 top: 2.125em; 1621 left: 6.4375em 1622} 1623 1624.ripple-container>span:nth-child(350):hover~.hover-ripple { 1625 top: 2.375em; 1626 left: 6.4375em 1627} 1628 1629.ripple-container>span:nth-child(386):hover~.hover-ripple { 1630 top: 2.625em; 1631 left: 6.4375em 1632} 1633 1634.ripple-container>span:nth-child(422):hover~.hover-ripple { 1635 top: 2.875em; 1636 left: 6.4375em 1637} 1638 1639.ripple-container>span:nth-child(27):hover~.hover-ripple { 1640 top: 0.125em; 1641 left: 6.6875em 1642} 1643 1644.ripple-container>span:nth-child(63):hover~.hover-ripple { 1645 top: 0.375em; 1646 left: 6.6875em 1647} 1648 1649.ripple-container>span:nth-child(99):hover~.hover-ripple { 1650 top: 0.625em; 1651 left: 6.6875em 1652} 1653 1654.ripple-container>span:nth-child(135):hover~.hover-ripple { 1655 top: 0.875em; 1656 left: 6.6875em 1657} 1658 1659.ripple-container>span:nth-child(171):hover~.hover-ripple { 1660 top: 1.125em; 1661 left: 6.6875em 1662} 1663 1664.ripple-container>span:nth-child(207):hover~.hover-ripple { 1665 top: 1.375em; 1666 left: 6.6875em 1667} 1668 1669.ripple-container>span:nth-child(243):hover~.hover-ripple { 1670 top: 1.625em; 1671 left: 6.6875em 1672} 1673 1674.ripple-container>span:nth-child(279):hover~.hover-ripple { 1675 top: 1.875em; 1676 left: 6.6875em 1677} 1678 1679.ripple-container>span:nth-child(315):hover~.hover-ripple { 1680 top: 2.125em; 1681 left: 6.6875em 1682} 1683 1684.ripple-container>span:nth-child(351):hover~.hover-ripple { 1685 top: 2.375em; 1686 left: 6.6875em 1687} 1688 1689.ripple-container>span:nth-child(387):hover~.hover-ripple { 1690 top: 2.625em; 1691 left: 6.6875em 1692} 1693 1694.ripple-container>span:nth-child(423):hover~.hover-ripple { 1695 top: 2.875em; 1696 left: 6.6875em 1697} 1698 1699.ripple-container>span:nth-child(28):hover~.hover-ripple { 1700 top: 0.125em; 1701 left: 6.9375em 1702} 1703 1704.ripple-container>span:nth-child(64):hover~.hover-ripple { 1705 top: 0.375em; 1706 left: 6.9375em 1707} 1708 1709.ripple-container>span:nth-child(100):hover~.hover-ripple { 1710 top: 0.625em; 1711 left: 6.9375em 1712} 1713 1714.ripple-container>span:nth-child(136):hover~.hover-ripple { 1715 top: 0.875em; 1716 left: 6.9375em 1717} 1718 1719.ripple-container>span:nth-child(172):hover~.hover-ripple { 1720 top: 1.125em; 1721 left: 6.9375em 1722} 1723 1724.ripple-container>span:nth-child(208):hover~.hover-ripple { 1725 top: 1.375em; 1726 left: 6.9375em 1727} 1728 1729.ripple-container>span:nth-child(244):hover~.hover-ripple { 1730 top: 1.625em; 1731 left: 6.9375em 1732} 1733 1734.ripple-container>span:nth-child(280):hover~.hover-ripple { 1735 top: 1.875em; 1736 left: 6.9375em 1737} 1738 1739.ripple-container>span:nth-child(316):hover~.hover-ripple { 1740 top: 2.125em; 1741 left: 6.9375em 1742} 1743 1744.ripple-container>span:nth-child(352):hover~.hover-ripple { 1745 top: 2.375em; 1746 left: 6.9375em 1747} 1748 1749.ripple-container>span:nth-child(388):hover~.hover-ripple { 1750 top: 2.625em; 1751 left: 6.9375em 1752} 1753 1754.ripple-container>span:nth-child(424):hover~.hover-ripple { 1755 top: 2.875em; 1756 left: 6.9375em 1757} 1758 1759.ripple-container>span:nth-child(29):hover~.hover-ripple { 1760 top: 0.125em; 1761 left: 7.1875em 1762} 1763 1764.ripple-container>span:nth-child(65):hover~.hover-ripple { 1765 top: 0.375em; 1766 left: 7.1875em 1767} 1768 1769.ripple-container>span:nth-child(101):hover~.hover-ripple { 1770 top: 0.625em; 1771 left: 7.1875em 1772} 1773 1774.ripple-container>span:nth-child(137):hover~.hover-ripple { 1775 top: 0.875em; 1776 left: 7.1875em 1777} 1778 1779.ripple-container>span:nth-child(173):hover~.hover-ripple { 1780 top: 1.125em; 1781 left: 7.1875em 1782} 1783 1784.ripple-container>span:nth-child(209):hover~.hover-ripple { 1785 top: 1.375em; 1786 left: 7.1875em 1787} 1788 1789.ripple-container>span:nth-child(245):hover~.hover-ripple { 1790 top: 1.625em; 1791 left: 7.1875em 1792} 1793 1794.ripple-container>span:nth-child(281):hover~.hover-ripple { 1795 top: 1.875em; 1796 left: 7.1875em 1797} 1798 1799.ripple-container>span:nth-child(317):hover~.hover-ripple { 1800 top: 2.125em; 1801 left: 7.1875em 1802} 1803 1804.ripple-container>span:nth-child(353):hover~.hover-ripple { 1805 top: 2.375em; 1806 left: 7.1875em 1807} 1808 1809.ripple-container>span:nth-child(389):hover~.hover-ripple { 1810 top: 2.625em; 1811 left: 7.1875em 1812} 1813 1814.ripple-container>span:nth-child(425):hover~.hover-ripple { 1815 top: 2.875em; 1816 left: 7.1875em 1817} 1818 1819.ripple-container>span:nth-child(30):hover~.hover-ripple { 1820 top: 0.125em; 1821 left: 7.4375em 1822} 1823 1824.ripple-container>span:nth-child(66):hover~.hover-ripple { 1825 top: 0.375em; 1826 left: 7.4375em 1827} 1828 1829.ripple-container>span:nth-child(102):hover~.hover-ripple { 1830 top: 0.625em; 1831 left: 7.4375em 1832} 1833 1834.ripple-container>span:nth-child(138):hover~.hover-ripple { 1835 top: 0.875em; 1836 left: 7.4375em 1837} 1838 1839.ripple-container>span:nth-child(174):hover~.hover-ripple { 1840 top: 1.125em; 1841 left: 7.4375em 1842} 1843 1844.ripple-container>span:nth-child(210):hover~.hover-ripple { 1845 top: 1.375em; 1846 left: 7.4375em 1847} 1848 1849.ripple-container>span:nth-child(246):hover~.hover-ripple { 1850 top: 1.625em; 1851 left: 7.4375em 1852} 1853 1854.ripple-container>span:nth-child(282):hover~.hover-ripple { 1855 top: 1.875em; 1856 left: 7.4375em 1857} 1858 1859.ripple-container>span:nth-child(318):hover~.hover-ripple { 1860 top: 2.125em; 1861 left: 7.4375em 1862} 1863 1864.ripple-container>span:nth-child(354):hover~.hover-ripple { 1865 top: 2.375em; 1866 left: 7.4375em 1867} 1868 1869.ripple-container>span:nth-child(390):hover~.hover-ripple { 1870 top: 2.625em; 1871 left: 7.4375em 1872} 1873 1874.ripple-container>span:nth-child(426):hover~.hover-ripple { 1875 top: 2.875em; 1876 left: 7.4375em 1877} 1878 1879.ripple-container>span:nth-child(31):hover~.hover-ripple { 1880 top: 0.125em; 1881 left: 7.6875em 1882} 1883 1884.ripple-container>span:nth-child(67):hover~.hover-ripple { 1885 top: 0.375em; 1886 left: 7.6875em 1887} 1888 1889.ripple-container>span:nth-child(103):hover~.hover-ripple { 1890 top: 0.625em; 1891 left: 7.6875em 1892} 1893 1894.ripple-container>span:nth-child(139):hover~.hover-ripple { 1895 top: 0.875em; 1896 left: 7.6875em 1897} 1898 1899.ripple-container>span:nth-child(175):hover~.hover-ripple { 1900 top: 1.125em; 1901 left: 7.6875em 1902} 1903 1904.ripple-container>span:nth-child(211):hover~.hover-ripple { 1905 top: 1.375em; 1906 left: 7.6875em 1907} 1908 1909.ripple-container>span:nth-child(247):hover~.hover-ripple { 1910 top: 1.625em; 1911 left: 7.6875em 1912} 1913 1914.ripple-container>span:nth-child(283):hover~.hover-ripple { 1915 top: 1.875em; 1916 left: 7.6875em 1917} 1918 1919.ripple-container>span:nth-child(319):hover~.hover-ripple { 1920 top: 2.125em; 1921 left: 7.6875em 1922} 1923 1924.ripple-container>span:nth-child(355):hover~.hover-ripple { 1925 top: 2.375em; 1926 left: 7.6875em 1927} 1928 1929.ripple-container>span:nth-child(391):hover~.hover-ripple { 1930 top: 2.625em; 1931 left: 7.6875em 1932} 1933 1934.ripple-container>span:nth-child(427):hover~.hover-ripple { 1935 top: 2.875em; 1936 left: 7.6875em 1937} 1938 1939.ripple-container>span:nth-child(32):hover~.hover-ripple { 1940 top: 0.125em; 1941 left: 7.9375em 1942} 1943 1944.ripple-container>span:nth-child(68):hover~.hover-ripple { 1945 top: 0.375em; 1946 left: 7.9375em 1947} 1948 1949.ripple-container>span:nth-child(104):hover~.hover-ripple { 1950 top: 0.625em; 1951 left: 7.9375em 1952} 1953 1954.ripple-container>span:nth-child(140):hover~.hover-ripple { 1955 top: 0.875em; 1956 left: 7.9375em 1957} 1958 1959.ripple-container>span:nth-child(176):hover~.hover-ripple { 1960 top: 1.125em; 1961 left: 7.9375em 1962} 1963 1964.ripple-container>span:nth-child(212):hover~.hover-ripple { 1965 top: 1.375em; 1966 left: 7.9375em 1967} 1968 1969.ripple-container>span:nth-child(248):hover~.hover-ripple { 1970 top: 1.625em; 1971 left: 7.9375em 1972} 1973 1974.ripple-container>span:nth-child(284):hover~.hover-ripple { 1975 top: 1.875em; 1976 left: 7.9375em 1977} 1978 1979.ripple-container>span:nth-child(320):hover~.hover-ripple { 1980 top: 2.125em; 1981 left: 7.9375em 1982} 1983 1984.ripple-container>span:nth-child(356):hover~.hover-ripple { 1985 top: 2.375em; 1986 left: 7.9375em 1987} 1988 1989.ripple-container>span:nth-child(392):hover~.hover-ripple { 1990 top: 2.625em; 1991 left: 7.9375em 1992} 1993 1994.ripple-container>span:nth-child(428):hover~.hover-ripple { 1995 top: 2.875em; 1996 left: 7.9375em 1997} 1998 1999.ripple-container>span:nth-child(33):hover~.hover-ripple { 2000 top: 0.125em; 2001 left: 8.1875em 2002} 2003 2004.ripple-container>span:nth-child(69):hover~.hover-ripple { 2005 top: 0.375em; 2006 left: 8.1875em 2007} 2008 2009.ripple-container>span:nth-child(105):hover~.hover-ripple { 2010 top: 0.625em; 2011 left: 8.1875em 2012} 2013 2014.ripple-container>span:nth-child(141):hover~.hover-ripple { 2015 top: 0.875em; 2016 left: 8.1875em 2017} 2018 2019.ripple-container>span:nth-child(177):hover~.hover-ripple { 2020 top: 1.125em; 2021 left: 8.1875em 2022} 2023 2024.ripple-container>span:nth-child(213):hover~.hover-ripple { 2025 top: 1.375em; 2026 left: 8.1875em 2027} 2028 2029.ripple-container>span:nth-child(249):hover~.hover-ripple { 2030 top: 1.625em; 2031 left: 8.1875em 2032} 2033 2034.ripple-container>span:nth-child(285):hover~.hover-ripple { 2035 top: 1.875em; 2036 left: 8.1875em 2037} 2038 2039.ripple-container>span:nth-child(321):hover~.hover-ripple { 2040 top: 2.125em; 2041 left: 8.1875em 2042} 2043 2044.ripple-container>span:nth-child(357):hover~.hover-ripple { 2045 top: 2.375em; 2046 left: 8.1875em 2047} 2048 2049.ripple-container>span:nth-child(393):hover~.hover-ripple { 2050 top: 2.625em; 2051 left: 8.1875em 2052} 2053 2054.ripple-container>span:nth-child(429):hover~.hover-ripple { 2055 top: 2.875em; 2056 left: 8.1875em 2057} 2058 2059.ripple-container>span:nth-child(34):hover~.hover-ripple { 2060 top: 0.125em; 2061 left: 8.4375em 2062} 2063 2064.ripple-container>span:nth-child(70):hover~.hover-ripple { 2065 top: 0.375em; 2066 left: 8.4375em 2067} 2068 2069.ripple-container>span:nth-child(106):hover~.hover-ripple { 2070 top: 0.625em; 2071 left: 8.4375em 2072} 2073 2074.ripple-container>span:nth-child(142):hover~.hover-ripple { 2075 top: 0.875em; 2076 left: 8.4375em 2077} 2078 2079.ripple-container>span:nth-child(178):hover~.hover-ripple { 2080 top: 1.125em; 2081 left: 8.4375em 2082} 2083 2084.ripple-container>span:nth-child(214):hover~.hover-ripple { 2085 top: 1.375em; 2086 left: 8.4375em 2087} 2088 2089.ripple-container>span:nth-child(250):hover~.hover-ripple { 2090 top: 1.625em; 2091 left: 8.4375em 2092} 2093 2094.ripple-container>span:nth-child(286):hover~.hover-ripple { 2095 top: 1.875em; 2096 left: 8.4375em 2097} 2098 2099.ripple-container>span:nth-child(322):hover~.hover-ripple { 2100 top: 2.125em; 2101 left: 8.4375em 2102} 2103 2104.ripple-container>span:nth-child(358):hover~.hover-ripple { 2105 top: 2.375em; 2106 left: 8.4375em 2107} 2108 2109.ripple-container>span:nth-child(394):hover~.hover-ripple { 2110 top: 2.625em; 2111 left: 8.4375em 2112} 2113 2114.ripple-container>span:nth-child(430):hover~.hover-ripple { 2115 top: 2.875em; 2116 left: 8.4375em 2117} 2118 2119.ripple-container>span:nth-child(35):hover~.hover-ripple { 2120 top: 0.125em; 2121 left: 8.6875em 2122} 2123 2124.ripple-container>span:nth-child(71):hover~.hover-ripple { 2125 top: 0.375em; 2126 left: 8.6875em 2127} 2128 2129.ripple-container>span:nth-child(107):hover~.hover-ripple { 2130 top: 0.625em; 2131 left: 8.6875em 2132} 2133 2134.ripple-container>span:nth-child(143):hover~.hover-ripple { 2135 top: 0.875em; 2136 left: 8.6875em 2137} 2138 2139.ripple-container>span:nth-child(179):hover~.hover-ripple { 2140 top: 1.125em; 2141 left: 8.6875em 2142} 2143 2144.ripple-container>span:nth-child(215):hover~.hover-ripple { 2145 top: 1.375em; 2146 left: 8.6875em 2147} 2148 2149.ripple-container>span:nth-child(251):hover~.hover-ripple { 2150 top: 1.625em; 2151 left: 8.6875em 2152} 2153 2154.ripple-container>span:nth-child(287):hover~.hover-ripple { 2155 top: 1.875em; 2156 left: 8.6875em 2157} 2158 2159.ripple-container>span:nth-child(323):hover~.hover-ripple { 2160 top: 2.125em; 2161 left: 8.6875em 2162} 2163 2164.ripple-container>span:nth-child(359):hover~.hover-ripple { 2165 top: 2.375em; 2166 left: 8.6875em 2167} 2168 2169.ripple-container>span:nth-child(395):hover~.hover-ripple { 2170 top: 2.625em; 2171 left: 8.6875em 2172} 2173 2174.ripple-container>span:nth-child(431):hover~.hover-ripple { 2175 top: 2.875em; 2176 left: 8.6875em 2177} 2178 2179.ripple-container>span:nth-child(36):hover~.hover-ripple { 2180 top: 0.125em; 2181 left: 8.9375em 2182} 2183 2184.ripple-container>span:nth-child(72):hover~.hover-ripple { 2185 top: 0.375em; 2186 left: 8.9375em 2187} 2188 2189.ripple-container>span:nth-child(108):hover~.hover-ripple { 2190 top: 0.625em; 2191 left: 8.9375em 2192} 2193 2194.ripple-container>span:nth-child(144):hover~.hover-ripple { 2195 top: 0.875em; 2196 left: 8.9375em 2197} 2198 2199.ripple-container>span:nth-child(180):hover~.hover-ripple { 2200 top: 1.125em; 2201 left: 8.9375em 2202} 2203 2204.ripple-container>span:nth-child(216):hover~.hover-ripple { 2205 top: 1.375em; 2206 left: 8.9375em 2207} 2208 2209.ripple-container>span:nth-child(252):hover~.hover-ripple { 2210 top: 1.625em; 2211 left: 8.9375em 2212} 2213 2214.ripple-container>span:nth-child(288):hover~.hover-ripple { 2215 top: 1.875em; 2216 left: 8.9375em 2217} 2218 2219.ripple-container>span:nth-child(324):hover~.hover-ripple { 2220 top: 2.125em; 2221 left: 8.9375em 2222} 2223 2224.ripple-container>span:nth-child(360):hover~.hover-ripple { 2225 top: 2.375em; 2226 left: 8.9375em 2227} 2228 2229.ripple-container>span:nth-child(396):hover~.hover-ripple { 2230 top: 2.625em; 2231 left: 8.9375em 2232} 2233 2234.ripple-container>span:nth-child(432):hover~.hover-ripple { 2235 top: 2.875em; 2236 left: 8.9375em 2237} 2238
669 views
Variation of abutton
MIT License