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