{"loaderData":{"0":null,"0-3":{"total":7367,"projects":[{"created":"2024-01-22T17:00:30.000Z","isPrivate":0,"projectId":"9f10e8","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T17:00:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5746,"cssLen":42942,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/*\nA better ripple button. Ripples on hover too :)\nMade with Svelte and SCSS: stackblitz.com/edit/vitejs-vite-q7fgp7\n */\n\n.btn {\n border-radius: 0.5em;\n font-size: larger;\n height: 3em;\n width: 9em;\n position: relative;\n border: none;\n background-color: hsl(218, 68%, 52%);\n overflow: hidden;\n isolation: isolate;\n color: white;\n cursor: pointer;\n box-shadow: 1px 2px 4px #0007;\n}\n\n.btn>span {\n position: relative;\n pointer-events: none;\n z-index: 10\n}\n\n.ripple-container {\n position: absolute;\n inset: 0;\n display: grid;\n grid-template-columns: repeat(36, 0.25em);\n}\n\n.ripple-container>span {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ripple-container>span::after {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: #6996e2;\n transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;\n width: 18.973665961em;\n height: 18.973665961em;\n opacity: 0;\n border-radius: 999em\n}\n\n.ripple-container>span:active::after {\n transition: 0s;\n width: 0em;\n height: 0em;\n opacity: 1\n}\n\n.hover-ripple {\n pointer-events: none;\n position: absolute;\n background-color: #6996e299;\n transition: width 0.5s ease-out, height 0.5s ease-out, top 99999s linear, left 9999s linear;\n transform: translate(-50%, -50%);\n top: 0em;\n left: 0em;\n width: 0em;\n height: 0em;\n border-radius: 999em\n}\n\n.ripple-container>span:hover~.hover-ripple {\n transition: width 0.5s ease-out, height 0.5s ease-out, top 0s linear, left 0s linear;\n width: 18.973665961em;\n height: 18.973665961em\n}\n\n.ripple-container>span:nth-child(1):hover~.hover-ripple {\n top: 0.125em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(37):hover~.hover-ripple {\n top: 0.375em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(73):hover~.hover-ripple {\n top: 0.625em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(109):hover~.hover-ripple {\n top: 0.875em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(145):hover~.hover-ripple {\n top: 1.125em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(181):hover~.hover-ripple {\n top: 1.375em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(217):hover~.hover-ripple {\n top: 1.625em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(253):hover~.hover-ripple {\n top: 1.875em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(289):hover~.hover-ripple {\n top: 2.125em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(325):hover~.hover-ripple {\n top: 2.375em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(361):hover~.hover-ripple {\n top: 2.625em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(397):hover~.hover-ripple {\n top: 2.875em;\n left: 0.1875em\n}\n\n.ripple-container>span:nth-child(2):hover~.hover-ripple {\n top: 0.125em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(38):hover~.hover-ripple {\n top: 0.375em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(74):hover~.hover-ripple {\n top: 0.625em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(110):hover~.hover-ripple {\n top: 0.875em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(146):hover~.hover-ripple {\n top: 1.125em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(182):hover~.hover-ripple {\n top: 1.375em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(218):hover~.hover-ripple {\n top: 1.625em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(254):hover~.hover-ripple {\n top: 1.875em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(290):hover~.hover-ripple {\n top: 2.125em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(326):hover~.hover-ripple {\n top: 2.375em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(362):hover~.hover-ripple {\n top: 2.625em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(398):hover~.hover-ripple {\n top: 2.875em;\n left: 0.4375em\n}\n\n.ripple-container>span:nth-child(3):hover~.hover-ripple {\n top: 0.125em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(39):hover~.hover-ripple {\n top: 0.375em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(75):hover~.hover-ripple {\n top: 0.625em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(111):hover~.hover-ripple {\n top: 0.875em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(147):hover~.hover-ripple {\n top: 1.125em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(183):hover~.hover-ripple {\n top: 1.375em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(219):hover~.hover-ripple {\n top: 1.625em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(255):hover~.hover-ripple {\n top: 1.875em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(291):hover~.hover-ripple {\n top: 2.125em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(327):hover~.hover-ripple {\n top: 2.375em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(363):hover~.hover-ripple {\n top: 2.625em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(399):hover~.hover-ripple {\n top: 2.875em;\n left: 0.6875em\n}\n\n.ripple-container>span:nth-child(4):hover~.hover-ripple {\n top: 0.125em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(40):hover~.hover-ripple {\n top: 0.375em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(76):hover~.hover-ripple {\n top: 0.625em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(112):hover~.hover-ripple {\n top: 0.875em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(148):hover~.hover-ripple {\n top: 1.125em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(184):hover~.hover-ripple {\n top: 1.375em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(220):hover~.hover-ripple {\n top: 1.625em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(256):hover~.hover-ripple {\n top: 1.875em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(292):hover~.hover-ripple {\n top: 2.125em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(328):hover~.hover-ripple {\n top: 2.375em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(364):hover~.hover-ripple {\n top: 2.625em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(400):hover~.hover-ripple {\n top: 2.875em;\n left: 0.9375em\n}\n\n.ripple-container>span:nth-child(5):hover~.hover-ripple {\n top: 0.125em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(41):hover~.hover-ripple {\n top: 0.375em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(77):hover~.hover-ripple {\n top: 0.625em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(113):hover~.hover-ripple {\n top: 0.875em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(149):hover~.hover-ripple {\n top: 1.125em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(185):hover~.hover-ripple {\n top: 1.375em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(221):hover~.hover-ripple {\n top: 1.625em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(257):hover~.hover-ripple {\n top: 1.875em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(293):hover~.hover-ripple {\n top: 2.125em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(329):hover~.hover-ripple {\n top: 2.375em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(365):hover~.hover-ripple {\n top: 2.625em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(401):hover~.hover-ripple {\n top: 2.875em;\n left: 1.1875em\n}\n\n.ripple-container>span:nth-child(6):hover~.hover-ripple {\n top: 0.125em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(42):hover~.hover-ripple {\n top: 0.375em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(78):hover~.hover-ripple {\n top: 0.625em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(114):hover~.hover-ripple {\n top: 0.875em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(150):hover~.hover-ripple {\n top: 1.125em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(186):hover~.hover-ripple {\n top: 1.375em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(222):hover~.hover-ripple {\n top: 1.625em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(258):hover~.hover-ripple {\n top: 1.875em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(294):hover~.hover-ripple {\n top: 2.125em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(330):hover~.hover-ripple {\n top: 2.375em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(366):hover~.hover-ripple {\n top: 2.625em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(402):hover~.hover-ripple {\n top: 2.875em;\n left: 1.4375em\n}\n\n.ripple-container>span:nth-child(7):hover~.hover-ripple {\n top: 0.125em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(43):hover~.hover-ripple {\n top: 0.375em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(79):hover~.hover-ripple {\n top: 0.625em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(115):hover~.hover-ripple {\n top: 0.875em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(151):hover~.hover-ripple {\n top: 1.125em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(187):hover~.hover-ripple {\n top: 1.375em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(223):hover~.hover-ripple {\n top: 1.625em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(259):hover~.hover-ripple {\n top: 1.875em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(295):hover~.hover-ripple {\n top: 2.125em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(331):hover~.hover-ripple {\n top: 2.375em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(367):hover~.hover-ripple {\n top: 2.625em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(403):hover~.hover-ripple {\n top: 2.875em;\n left: 1.6875em\n}\n\n.ripple-container>span:nth-child(8):hover~.hover-ripple {\n top: 0.125em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(44):hover~.hover-ripple {\n top: 0.375em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(80):hover~.hover-ripple {\n top: 0.625em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(116):hover~.hover-ripple {\n top: 0.875em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(152):hover~.hover-ripple {\n top: 1.125em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(188):hover~.hover-ripple {\n top: 1.375em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(224):hover~.hover-ripple {\n top: 1.625em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(260):hover~.hover-ripple {\n top: 1.875em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(296):hover~.hover-ripple {\n top: 2.125em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(332):hover~.hover-ripple {\n top: 2.375em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(368):hover~.hover-ripple {\n top: 2.625em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(404):hover~.hover-ripple {\n top: 2.875em;\n left: 1.9375em\n}\n\n.ripple-container>span:nth-child(9):hover~.hover-ripple {\n top: 0.125em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(45):hover~.hover-ripple {\n top: 0.375em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(81):hover~.hover-ripple {\n top: 0.625em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(117):hover~.hover-ripple {\n top: 0.875em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(153):hover~.hover-ripple {\n top: 1.125em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(189):hover~.hover-ripple {\n top: 1.375em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(225):hover~.hover-ripple {\n top: 1.625em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(261):hover~.hover-ripple {\n top: 1.875em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(297):hover~.hover-ripple {\n top: 2.125em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(333):hover~.hover-ripple {\n top: 2.375em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(369):hover~.hover-ripple {\n top: 2.625em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(405):hover~.hover-ripple {\n top: 2.875em;\n left: 2.1875em\n}\n\n.ripple-container>span:nth-child(10):hover~.hover-ripple {\n top: 0.125em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(46):hover~.hover-ripple {\n top: 0.375em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(82):hover~.hover-ripple {\n top: 0.625em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(118):hover~.hover-ripple {\n top: 0.875em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(154):hover~.hover-ripple {\n top: 1.125em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(190):hover~.hover-ripple {\n top: 1.375em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(226):hover~.hover-ripple {\n top: 1.625em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(262):hover~.hover-ripple {\n top: 1.875em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(298):hover~.hover-ripple {\n top: 2.125em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(334):hover~.hover-ripple {\n top: 2.375em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(370):hover~.hover-ripple {\n top: 2.625em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(406):hover~.hover-ripple {\n top: 2.875em;\n left: 2.4375em\n}\n\n.ripple-container>span:nth-child(11):hover~.hover-ripple {\n top: 0.125em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(47):hover~.hover-ripple {\n top: 0.375em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(83):hover~.hover-ripple {\n top: 0.625em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(119):hover~.hover-ripple {\n top: 0.875em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(155):hover~.hover-ripple {\n top: 1.125em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(191):hover~.hover-ripple {\n top: 1.375em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(227):hover~.hover-ripple {\n top: 1.625em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(263):hover~.hover-ripple {\n top: 1.875em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(299):hover~.hover-ripple {\n top: 2.125em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(335):hover~.hover-ripple {\n top: 2.375em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(371):hover~.hover-ripple {\n top: 2.625em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(407):hover~.hover-ripple {\n top: 2.875em;\n left: 2.6875em\n}\n\n.ripple-container>span:nth-child(12):hover~.hover-ripple {\n top: 0.125em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(48):hover~.hover-ripple {\n top: 0.375em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(84):hover~.hover-ripple {\n top: 0.625em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(120):hover~.hover-ripple {\n top: 0.875em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(156):hover~.hover-ripple {\n top: 1.125em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(192):hover~.hover-ripple {\n top: 1.375em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(228):hover~.hover-ripple {\n top: 1.625em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(264):hover~.hover-ripple {\n top: 1.875em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(300):hover~.hover-ripple {\n top: 2.125em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(336):hover~.hover-ripple {\n top: 2.375em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(372):hover~.hover-ripple {\n top: 2.625em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(408):hover~.hover-ripple {\n top: 2.875em;\n left: 2.9375em\n}\n\n.ripple-container>span:nth-child(13):hover~.hover-ripple {\n top: 0.125em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(49):hover~.hover-ripple {\n top: 0.375em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(85):hover~.hover-ripple {\n top: 0.625em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(121):hover~.hover-ripple {\n top: 0.875em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(157):hover~.hover-ripple {\n top: 1.125em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(193):hover~.hover-ripple {\n top: 1.375em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(229):hover~.hover-ripple {\n top: 1.625em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(265):hover~.hover-ripple {\n top: 1.875em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(301):hover~.hover-ripple {\n top: 2.125em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(337):hover~.hover-ripple {\n top: 2.375em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(373):hover~.hover-ripple {\n top: 2.625em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(409):hover~.hover-ripple {\n top: 2.875em;\n left: 3.1875em\n}\n\n.ripple-container>span:nth-child(14):hover~.hover-ripple {\n top: 0.125em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(50):hover~.hover-ripple {\n top: 0.375em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(86):hover~.hover-ripple {\n top: 0.625em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(122):hover~.hover-ripple {\n top: 0.875em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(158):hover~.hover-ripple {\n top: 1.125em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(194):hover~.hover-ripple {\n top: 1.375em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(230):hover~.hover-ripple {\n top: 1.625em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(266):hover~.hover-ripple {\n top: 1.875em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(302):hover~.hover-ripple {\n top: 2.125em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(338):hover~.hover-ripple {\n top: 2.375em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(374):hover~.hover-ripple {\n top: 2.625em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(410):hover~.hover-ripple {\n top: 2.875em;\n left: 3.4375em\n}\n\n.ripple-container>span:nth-child(15):hover~.hover-ripple {\n top: 0.125em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(51):hover~.hover-ripple {\n top: 0.375em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(87):hover~.hover-ripple {\n top: 0.625em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(123):hover~.hover-ripple {\n top: 0.875em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(159):hover~.hover-ripple {\n top: 1.125em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(195):hover~.hover-ripple {\n top: 1.375em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(231):hover~.hover-ripple {\n top: 1.625em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(267):hover~.hover-ripple {\n top: 1.875em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(303):hover~.hover-ripple {\n top: 2.125em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(339):hover~.hover-ripple {\n top: 2.375em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(375):hover~.hover-ripple {\n top: 2.625em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(411):hover~.hover-ripple {\n top: 2.875em;\n left: 3.6875em\n}\n\n.ripple-container>span:nth-child(16):hover~.hover-ripple {\n top: 0.125em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(52):hover~.hover-ripple {\n top: 0.375em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(88):hover~.hover-ripple {\n top: 0.625em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(124):hover~.hover-ripple {\n top: 0.875em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(160):hover~.hover-ripple {\n top: 1.125em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(196):hover~.hover-ripple {\n top: 1.375em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(232):hover~.hover-ripple {\n top: 1.625em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(268):hover~.hover-ripple {\n top: 1.875em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(304):hover~.hover-ripple {\n top: 2.125em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(340):hover~.hover-ripple {\n top: 2.375em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(376):hover~.hover-ripple {\n top: 2.625em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(412):hover~.hover-ripple {\n top: 2.875em;\n left: 3.9375em\n}\n\n.ripple-container>span:nth-child(17):hover~.hover-ripple {\n top: 0.125em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(53):hover~.hover-ripple {\n top: 0.375em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(89):hover~.hover-ripple {\n top: 0.625em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(125):hover~.hover-ripple {\n top: 0.875em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(161):hover~.hover-ripple {\n top: 1.125em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(197):hover~.hover-ripple {\n top: 1.375em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(233):hover~.hover-ripple {\n top: 1.625em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(269):hover~.hover-ripple {\n top: 1.875em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(305):hover~.hover-ripple {\n top: 2.125em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(341):hover~.hover-ripple {\n top: 2.375em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(377):hover~.hover-ripple {\n top: 2.625em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(413):hover~.hover-ripple {\n top: 2.875em;\n left: 4.1875em\n}\n\n.ripple-container>span:nth-child(18):hover~.hover-ripple {\n top: 0.125em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(54):hover~.hover-ripple {\n top: 0.375em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(90):hover~.hover-ripple {\n top: 0.625em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(126):hover~.hover-ripple {\n top: 0.875em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(162):hover~.hover-ripple {\n top: 1.125em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(198):hover~.hover-ripple {\n top: 1.375em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(234):hover~.hover-ripple {\n top: 1.625em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(270):hover~.hover-ripple {\n top: 1.875em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(306):hover~.hover-ripple {\n top: 2.125em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(342):hover~.hover-ripple {\n top: 2.375em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(378):hover~.hover-ripple {\n top: 2.625em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(414):hover~.hover-ripple {\n top: 2.875em;\n left: 4.4375em\n}\n\n.ripple-container>span:nth-child(19):hover~.hover-ripple {\n top: 0.125em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(55):hover~.hover-ripple {\n top: 0.375em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(91):hover~.hover-ripple {\n top: 0.625em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(127):hover~.hover-ripple {\n top: 0.875em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(163):hover~.hover-ripple {\n top: 1.125em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(199):hover~.hover-ripple {\n top: 1.375em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(235):hover~.hover-ripple {\n top: 1.625em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(271):hover~.hover-ripple {\n top: 1.875em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(307):hover~.hover-ripple {\n top: 2.125em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(343):hover~.hover-ripple {\n top: 2.375em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(379):hover~.hover-ripple {\n top: 2.625em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(415):hover~.hover-ripple {\n top: 2.875em;\n left: 4.6875em\n}\n\n.ripple-container>span:nth-child(20):hover~.hover-ripple {\n top: 0.125em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(56):hover~.hover-ripple {\n top: 0.375em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(92):hover~.hover-ripple {\n top: 0.625em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(128):hover~.hover-ripple {\n top: 0.875em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(164):hover~.hover-ripple {\n top: 1.125em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(200):hover~.hover-ripple {\n top: 1.375em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(236):hover~.hover-ripple {\n top: 1.625em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(272):hover~.hover-ripple {\n top: 1.875em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(308):hover~.hover-ripple {\n top: 2.125em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(344):hover~.hover-ripple {\n top: 2.375em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(380):hover~.hover-ripple {\n top: 2.625em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(416):hover~.hover-ripple {\n top: 2.875em;\n left: 4.9375em\n}\n\n.ripple-container>span:nth-child(21):hover~.hover-ripple {\n top: 0.125em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(57):hover~.hover-ripple {\n top: 0.375em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(93):hover~.hover-ripple {\n top: 0.625em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(129):hover~.hover-ripple {\n top: 0.875em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(165):hover~.hover-ripple {\n top: 1.125em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(201):hover~.hover-ripple {\n top: 1.375em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(237):hover~.hover-ripple {\n top: 1.625em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(273):hover~.hover-ripple {\n top: 1.875em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(309):hover~.hover-ripple {\n top: 2.125em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(345):hover~.hover-ripple {\n top: 2.375em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(381):hover~.hover-ripple {\n top: 2.625em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(417):hover~.hover-ripple {\n top: 2.875em;\n left: 5.1875em\n}\n\n.ripple-container>span:nth-child(22):hover~.hover-ripple {\n top: 0.125em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(58):hover~.hover-ripple {\n top: 0.375em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(94):hover~.hover-ripple {\n top: 0.625em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(130):hover~.hover-ripple {\n top: 0.875em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(166):hover~.hover-ripple {\n top: 1.125em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(202):hover~.hover-ripple {\n top: 1.375em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(238):hover~.hover-ripple {\n top: 1.625em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(274):hover~.hover-ripple {\n top: 1.875em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(310):hover~.hover-ripple {\n top: 2.125em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(346):hover~.hover-ripple {\n top: 2.375em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(382):hover~.hover-ripple {\n top: 2.625em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(418):hover~.hover-ripple {\n top: 2.875em;\n left: 5.4375em\n}\n\n.ripple-container>span:nth-child(23):hover~.hover-ripple {\n top: 0.125em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(59):hover~.hover-ripple {\n top: 0.375em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(95):hover~.hover-ripple {\n top: 0.625em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(131):hover~.hover-ripple {\n top: 0.875em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(167):hover~.hover-ripple {\n top: 1.125em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(203):hover~.hover-ripple {\n top: 1.375em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(239):hover~.hover-ripple {\n top: 1.625em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(275):hover~.hover-ripple {\n top: 1.875em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(311):hover~.hover-ripple {\n top: 2.125em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(347):hover~.hover-ripple {\n top: 2.375em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(383):hover~.hover-ripple {\n top: 2.625em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(419):hover~.hover-ripple {\n top: 2.875em;\n left: 5.6875em\n}\n\n.ripple-container>span:nth-child(24):hover~.hover-ripple {\n top: 0.125em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(60):hover~.hover-ripple {\n top: 0.375em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(96):hover~.hover-ripple {\n top: 0.625em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(132):hover~.hover-ripple {\n top: 0.875em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(168):hover~.hover-ripple {\n top: 1.125em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(204):hover~.hover-ripple {\n top: 1.375em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(240):hover~.hover-ripple {\n top: 1.625em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(276):hover~.hover-ripple {\n top: 1.875em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(312):hover~.hover-ripple {\n top: 2.125em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(348):hover~.hover-ripple {\n top: 2.375em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(384):hover~.hover-ripple {\n top: 2.625em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(420):hover~.hover-ripple {\n top: 2.875em;\n left: 5.9375em\n}\n\n.ripple-container>span:nth-child(25):hover~.hover-ripple {\n top: 0.125em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(61):hover~.hover-ripple {\n top: 0.375em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(97):hover~.hover-ripple {\n top: 0.625em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(133):hover~.hover-ripple {\n top: 0.875em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(169):hover~.hover-ripple {\n top: 1.125em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(205):hover~.hover-ripple {\n top: 1.375em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(241):hover~.hover-ripple {\n top: 1.625em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(277):hover~.hover-ripple {\n top: 1.875em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(313):hover~.hover-ripple {\n top: 2.125em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(349):hover~.hover-ripple {\n top: 2.375em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(385):hover~.hover-ripple {\n top: 2.625em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(421):hover~.hover-ripple {\n top: 2.875em;\n left: 6.1875em\n}\n\n.ripple-container>span:nth-child(26):hover~.hover-ripple {\n top: 0.125em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(62):hover~.hover-ripple {\n top: 0.375em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(98):hover~.hover-ripple {\n top: 0.625em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(134):hover~.hover-ripple {\n top: 0.875em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(170):hover~.hover-ripple {\n top: 1.125em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(206):hover~.hover-ripple {\n top: 1.375em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(242):hover~.hover-ripple {\n top: 1.625em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(278):hover~.hover-ripple {\n top: 1.875em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(314):hover~.hover-ripple {\n top: 2.125em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(350):hover~.hover-ripple {\n top: 2.375em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(386):hover~.hover-ripple {\n top: 2.625em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(422):hover~.hover-ripple {\n top: 2.875em;\n left: 6.4375em\n}\n\n.ripple-container>span:nth-child(27):hover~.hover-ripple {\n top: 0.125em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(63):hover~.hover-ripple {\n top: 0.375em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(99):hover~.hover-ripple {\n top: 0.625em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(135):hover~.hover-ripple {\n top: 0.875em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(171):hover~.hover-ripple {\n top: 1.125em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(207):hover~.hover-ripple {\n top: 1.375em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(243):hover~.hover-ripple {\n top: 1.625em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(279):hover~.hover-ripple {\n top: 1.875em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(315):hover~.hover-ripple {\n top: 2.125em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(351):hover~.hover-ripple {\n top: 2.375em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(387):hover~.hover-ripple {\n top: 2.625em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(423):hover~.hover-ripple {\n top: 2.875em;\n left: 6.6875em\n}\n\n.ripple-container>span:nth-child(28):hover~.hover-ripple {\n top: 0.125em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(64):hover~.hover-ripple {\n top: 0.375em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(100):hover~.hover-ripple {\n top: 0.625em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(136):hover~.hover-ripple {\n top: 0.875em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(172):hover~.hover-ripple {\n top: 1.125em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(208):hover~.hover-ripple {\n top: 1.375em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(244):hover~.hover-ripple {\n top: 1.625em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(280):hover~.hover-ripple {\n top: 1.875em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(316):hover~.hover-ripple {\n top: 2.125em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(352):hover~.hover-ripple {\n top: 2.375em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(388):hover~.hover-ripple {\n top: 2.625em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(424):hover~.hover-ripple {\n top: 2.875em;\n left: 6.9375em\n}\n\n.ripple-container>span:nth-child(29):hover~.hover-ripple {\n top: 0.125em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(65):hover~.hover-ripple {\n top: 0.375em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(101):hover~.hover-ripple {\n top: 0.625em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(137):hover~.hover-ripple {\n top: 0.875em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(173):hover~.hover-ripple {\n top: 1.125em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(209):hover~.hover-ripple {\n top: 1.375em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(245):hover~.hover-ripple {\n top: 1.625em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(281):hover~.hover-ripple {\n top: 1.875em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(317):hover~.hover-ripple {\n top: 2.125em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(353):hover~.hover-ripple {\n top: 2.375em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(389):hover~.hover-ripple {\n top: 2.625em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(425):hover~.hover-ripple {\n top: 2.875em;\n left: 7.1875em\n}\n\n.ripple-container>span:nth-child(30):hover~.hover-ripple {\n top: 0.125em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(66):hover~.hover-ripple {\n top: 0.375em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(102):hover~.hover-ripple {\n top: 0.625em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(138):hover~.hover-ripple {\n top: 0.875em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(174):hover~.hover-ripple {\n top: 1.125em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(210):hover~.hover-ripple {\n top: 1.375em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(246):hover~.hover-ripple {\n top: 1.625em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(282):hover~.hover-ripple {\n top: 1.875em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(318):hover~.hover-ripple {\n top: 2.125em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(354):hover~.hover-ripple {\n top: 2.375em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(390):hover~.hover-ripple {\n top: 2.625em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(426):hover~.hover-ripple {\n top: 2.875em;\n left: 7.4375em\n}\n\n.ripple-container>span:nth-child(31):hover~.hover-ripple {\n top: 0.125em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(67):hover~.hover-ripple {\n top: 0.375em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(103):hover~.hover-ripple {\n top: 0.625em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(139):hover~.hover-ripple {\n top: 0.875em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(175):hover~.hover-ripple {\n top: 1.125em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(211):hover~.hover-ripple {\n top: 1.375em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(247):hover~.hover-ripple {\n top: 1.625em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(283):hover~.hover-ripple {\n top: 1.875em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(319):hover~.hover-ripple {\n top: 2.125em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(355):hover~.hover-ripple {\n top: 2.375em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(391):hover~.hover-ripple {\n top: 2.625em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(427):hover~.hover-ripple {\n top: 2.875em;\n left: 7.6875em\n}\n\n.ripple-container>span:nth-child(32):hover~.hover-ripple {\n top: 0.125em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(68):hover~.hover-ripple {\n top: 0.375em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(104):hover~.hover-ripple {\n top: 0.625em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(140):hover~.hover-ripple {\n top: 0.875em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(176):hover~.hover-ripple {\n top: 1.125em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(212):hover~.hover-ripple {\n top: 1.375em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(248):hover~.hover-ripple {\n top: 1.625em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(284):hover~.hover-ripple {\n top: 1.875em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(320):hover~.hover-ripple {\n top: 2.125em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(356):hover~.hover-ripple {\n top: 2.375em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(392):hover~.hover-ripple {\n top: 2.625em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(428):hover~.hover-ripple {\n top: 2.875em;\n left: 7.9375em\n}\n\n.ripple-container>span:nth-child(33):hover~.hover-ripple {\n top: 0.125em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(69):hover~.hover-ripple {\n top: 0.375em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(105):hover~.hover-ripple {\n top: 0.625em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(141):hover~.hover-ripple {\n top: 0.875em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(177):hover~.hover-ripple {\n top: 1.125em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(213):hover~.hover-ripple {\n top: 1.375em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(249):hover~.hover-ripple {\n top: 1.625em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(285):hover~.hover-ripple {\n top: 1.875em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(321):hover~.hover-ripple {\n top: 2.125em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(357):hover~.hover-ripple {\n top: 2.375em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(393):hover~.hover-ripple {\n top: 2.625em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(429):hover~.hover-ripple {\n top: 2.875em;\n left: 8.1875em\n}\n\n.ripple-container>span:nth-child(34):hover~.hover-ripple {\n top: 0.125em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(70):hover~.hover-ripple {\n top: 0.375em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(106):hover~.hover-ripple {\n top: 0.625em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(142):hover~.hover-ripple {\n top: 0.875em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(178):hover~.hover-ripple {\n top: 1.125em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(214):hover~.hover-ripple {\n top: 1.375em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(250):hover~.hover-ripple {\n top: 1.625em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(286):hover~.hover-ripple {\n top: 1.875em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(322):hover~.hover-ripple {\n top: 2.125em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(358):hover~.hover-ripple {\n top: 2.375em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(394):hover~.hover-ripple {\n top: 2.625em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(430):hover~.hover-ripple {\n top: 2.875em;\n left: 8.4375em\n}\n\n.ripple-container>span:nth-child(35):hover~.hover-ripple {\n top: 0.125em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(71):hover~.hover-ripple {\n top: 0.375em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(107):hover~.hover-ripple {\n top: 0.625em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(143):hover~.hover-ripple {\n top: 0.875em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(179):hover~.hover-ripple {\n top: 1.125em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(215):hover~.hover-ripple {\n top: 1.375em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(251):hover~.hover-ripple {\n top: 1.625em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(287):hover~.hover-ripple {\n top: 1.875em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(323):hover~.hover-ripple {\n top: 2.125em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(359):hover~.hover-ripple {\n top: 2.375em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(395):hover~.hover-ripple {\n top: 2.625em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(431):hover~.hover-ripple {\n top: 2.875em;\n left: 8.6875em\n}\n\n.ripple-container>span:nth-child(36):hover~.hover-ripple {\n top: 0.125em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(72):hover~.hover-ripple {\n top: 0.375em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(108):hover~.hover-ripple {\n top: 0.625em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(144):hover~.hover-ripple {\n top: 0.875em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(180):hover~.hover-ripple {\n top: 1.125em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(216):hover~.hover-ripple {\n top: 1.375em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(252):hover~.hover-ripple {\n top: 1.625em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(288):hover~.hover-ripple {\n top: 1.875em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(324):hover~.hover-ripple {\n top: 2.125em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(360):hover~.hover-ripple {\n top: 2.375em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(396):hover~.hover-ripple {\n top: 2.625em;\n left: 8.9375em\n}\n\n.ripple-container>span:nth-child(432):hover~.hover-ripple {\n top: 2.875em;\n left: 8.9375em\n}\n"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"615c6d","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1084,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: inline-block;\n padding: 15px 30px;\n background: linear-gradient(45deg, #00b5ff, #005eff);\n color: #fff;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: box-shadow 0.3s, transform 0.3s;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.1);\n transform: translateY(100%) rotateX(90deg);\n transition: transform 0.3s ease-in-out;\n}\n\n.button:hover::before {\n transform: translateY(0) rotateX(0);\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: -5px;\n left: -5px;\n width: calc(100% + 10px);\n height: calc(100% + 10px);\n border-radius: 15px;\n border: 1px solid #00b5ff;\n z-index: -1;\n}\n\n /* Hover Effect */\n.button:hover {\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);\n transform: scale(1.05);\n}\n\n /* Active Effect */\n.button:active {\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n transform: scale(0.95);\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"28dc96","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1339,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-57,\n.btn-57 *,\n.btn-57 :after,\n.btn-57 :before,\n.btn-57:after,\n.btn-57:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-57 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n}\n\n.btn-57:disabled {\n cursor: default;\n}\n\n.btn-57:-moz-focusring {\n outline: auto;\n}\n\n.btn-57 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-57 [hidden] {\n display: none;\n}\n\n.btn-57 {\n background: none;\n border: 3px solid;\n border-radius: 999px;\n box-sizing: border-box;\n color: #000;\n display: block;\n font-weight: 900;\n -webkit-mask-image: none;\n padding: 20px 60px;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-57:before {\n background: #fff;\n border-radius: 999px;\n content: \"\";\n inset: 0;\n position: absolute;\n transform: translate(10px, 10px);\n transition: transform 0.2s;\n z-index: -1;\n}\n\n.btn-57:hover:before {\n transform: translate(0);\n}\n"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"28b7bb","snapshot":null,"tags":null,"title":"button by JesusRafaelNavaCruz","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":200,"cssLen":2324,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cursor-pointer {\n cursor: pointer\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.uppercase {\n text-transform: uppercase\n}\n\n.transition {\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.hover\\:shadow-\\[0\\.5rem_0\\.5rem_\\#F44336\\2c -0\\.5rem_-0\\.5rem_\\#00BCD4\\]:hover {\n --tw-shadow: 0.5rem 0.5rem #F44336,-0.5rem -0.5rem #00BCD4;\n --tw-shadow-colored: 0.5rem 0.5rem var(--tw-shadow-color), -0.5rem -0.5rem var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.active\\:translate-x-0:active {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.active\\:translate-x-0\\.5:active {\n --tw-translate-x: 0.125rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.active\\:translate-y-0:active {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.active\\:translate-y-0\\.5:active {\n --tw-translate-y: 0.125rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"2ca60c","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":1358,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n all: unset;\n width: 100px;\n height: 30px;\n font-size: 16px;\n background: transparent;\n border: none;\n position: relative;\n color: #f0f0f0;\n cursor: pointer;\n z-index: 1;\n padding: 10px 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n transition: 0.3s ease-in-out;\n}\n\n.button:hover {\n box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\n}\n\n.button::after,\n.button::before {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -99999;\n transition: all .4s;\n}\n\n.button::before {\n transform: translate(0%, 0%);\n width: 100%;\n height: 100%;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n border-radius: 10px;\n}\n\n.button::after {\n transform: translate(10px, 10px);\n width: 35px;\n height: 35px;\n background: #6804da2f;\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n border-radius: 50px;\n}\n\n.button:hover::before {\n transform: translate(5%, 20%);\n width: 110%;\n height: 110%;\n}\n\n.button:hover::after {\n border-radius: 10px;\n transform: translate(0, 0);\n width: 100%;\n height: 100%;\n}\n\n.button:active::after {\n transition: 0s;\n transform: translate(0, 5%);\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"1cd4f7","snapshot":null,"tags":null,"title":"button by Wlidha09","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":152,"cssLen":3338,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-slice {\n background-color: transparent;\n padding: 1.2rem 2.5rem;\n border: 2px solid #ffffff;\n border-radius: 0rem;\n color: #ffffff;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.3rem;\n position: relative;\n -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);\n -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);\n transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);\n /* custom */\n -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);\n -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);\n transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);\n /* custom */\n}\n\n.btn-slice .top {\n position: relative;\n height: 6px;\n overflow: hidden;\n top: 0;\n -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);\n -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);\n transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);\n /* custom */\n -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);\n -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);\n transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);\n /* custom */\n -webkit-transition-delay: 0.35s;\n -moz-transition-delay: 0.35s;\n -ms-transition-delay: 0.35s;\n -o-transition-delay: 0.35s;\n transition-delay: 0.35s;\n}\n\n.btn-slice .bottom {\n position: relative;\n height: 6px;\n overflow: hidden;\n bottom: 0;\n -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);\n -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);\n transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);\n /* custom */\n -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);\n -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);\n transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);\n /* custom */\n -webkit-transition-delay: 0.35s;\n -moz-transition-delay: 0.35s;\n -ms-transition-delay: 0.35s;\n -o-transition-delay: 0.35s;\n transition-delay: 0.35s;\n}\n\n.btn-slice .bottom span {\n top: -6px;\n position: absolute;\n left: 0;\n}\n\n.btn-slice:hover .top {\n top: -5px;\n -webkit-transition-delay: 0.35s;\n -moz-transition-delay: 0.35s;\n -ms-transition-delay: 0.35s;\n -o-transition-delay: 0.35s;\n transition-delay: 0.35s;\n}\n\n.btn-slice:hover .bottom {\n bottom: -5px;\n -webkit-transition-delay: 0.35s;\n -moz-transition-delay: 0.35s;\n -ms-transition-delay: 0.35s;\n -o-transition-delay: 0.35s;\n transition-delay: 0.35s;\n}\n\n.btn-slice:hover, .btn-slice:focus, .btn-slice:active {\n margin-left: 10px;\n}\n\n.btn-slice:before {\n content: '';\n height: 1px;\n width: 60px;\n background-color: #ffffff;\n position: absolute;\n margin-top: 6px;\n right: -35px;\n -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);\n -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);\n transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);\n /* custom */\n -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);\n -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);\n transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);\n /* custom */\n}\n\n.btn-slice:hover:before {\n width: 130%;\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"4b68ae","snapshot":null,"tags":null,"title":"button by Cornerstone-04","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":767,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n display: flex;\n align-items: center;\n color: #000;\n background: none;\n border: none;\n padding: 12px 18px;\n position: relative;\n font-size: 1rem;\n text-transform: uppercase;\n font-weight: 700;\n font-family: monospace;\n transition: linear .3s;\n}\n\nbutton:hover {\n color: #fff;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(calc(100% + 4px));\n width: 45px;\n height: 45px;\n background-color: #dc143c;\n border-radius: 50px;\n transition: transform .25s .25s cubic-bezier(0, 0, .5, 2), width .25s cubic-bezier(0, 0, .5, 2);\n z-index: -1;\n}\n\nbutton:hover::before {\n width: 100%;\n transform: translateY(-50%) translateX(-18px);\n transition: transform .25s cubic-bezier(0,0,.5,2);\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"5b1318","snapshot":null,"tags":null,"title":"button by vikas7754","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1010,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".box {\n background: linear-gradient(to right, gold, darkorange);\n color: white;\n --width: 200px;\n --height: calc(var(--width) / 3);\n width: var(--width);\n height: var(--height);\n text-align: center;\n line-height: var(--height);\n font-size: calc(var(--height) / 2.5);\n font-family: sans-serif;\n letter-spacing: 0.2em;\n border: 1px solid darkgoldenrod;\n border-radius: 2em;\n transform: perspective(500px) rotateY(-15deg);\n text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);\n box-shadow: 2px 0 0 5px rgba(76, 255, 97, 0.8);\n transition: 0.5s;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\n.box:hover {\n transform: perspective(500px) rotateY(15deg);\n text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);\n box-shadow: -2px 0 0 5px rgba(35, 255, 218, 0.8);\n}\n\n.box::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(to right, transparent, white, transparent);\n left: -100%;\n transition: 0.5s;\n}\n\n.box:hover::before {\n left: 100%;\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"948c5d","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":387,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button, button:focus {\n font-size: 20px;\n padding: 12px 30px;\n border-radius: 5px;\n background-color: #ff9800;\n border: 2px solid #f57c00;\n color: #fff;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n transition: 0.3s;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f57c00;\n}\n\nbutton:active {\n transform: translateY(2px);\n box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"fddbf6","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":366,"cssLen":602,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 122px;\n height: 60px;\n padding: 18px 22px 18px 20px;\n gap: 1px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #ff284818;\n border-radius: 16px;\n border: none;\n cursor: pointer;\n}\n\n.label {\n font-family: sans-serif;\n height: 23px;\n font-size: 19px;\n line-height: 24px;\n color: #FF2849;\n}\n\n.button:hover {\n background: #ff284839;\n}\n\n.button:hover .svg-icon {\n animation: pulse 0.7s linear infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.13);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"07e29c","snapshot":null,"tags":null,"title":"button by deepak16375","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":334,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: .9rem 1.5rem;\n border: .2rem solid #443;\n border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;\n color: #443;\n background: none;\n cursor: pointer;\n margin-top: 1rem;\n font-size: 1.7rem;\n transition: all .2s linear;\n}\n\n.button:hover {\n border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;\n border: .2rem dashed #443;\n}\n"},{"created":"2024-01-22T17:00:29.000Z","isPrivate":0,"projectId":"fb8770","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1375,"cssLen":831,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 7px;\n border: none;\n background: #0ba360;\n background: linear-gradient(\n to right,\n #0ba360,#3cba92\n );\n color: white;\n font-family: inherit;\n text-align: center;\n font-size: 13px;\n box-shadow: 0px 14px 56px -11px #0ba360;\n width: 11em;\n padding: 0.7em;\n transition: all 0.4s;\n cursor: pointer;\n}\n\n.button svg {\n width: 25px;\n height: 25px;\n}\n\n.button svg path {\n fill: white\n}\n\n.button span {\n cursor: pointer;\n display: inline-block;\n position: relative;\n transition: 0.4s;\n}\n\n.button span:after {\n content: 'for free';\n position: absolute;\n opacity: 0;\n top: 0;\n right: -20px;\n transition: 0.7s;\n}\n\n.button:hover span {\n padding-right: 3.80em;\n}\n\n.button:hover span:after {\n opacity: 4;\n right: 0;\n}"}]}},"actionData":null,"errors":null}