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