{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"cbd6c0","snapshot":null,"tags":null,"title":"button by escannord","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":95,"cssLen":2018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n hover me\n \n

\n","css":".button {\n --color: rgb(56, 55, 100);\n padding: 1rem 2rem;\n background-color: transparent;\n color: var(--color);\n font-weight: bolder;\n text-transform: uppercase;\n display: flex;\n justify-content: space-around;\n align-items: center;\n cursor: pointer;\n position: relative;\n border-radius: 5px;\n}\n\n.arrow {\n display: inline-flex;\n position: relative;\n width: 30px;\n height: 15px;\n margin-left: 0.5rem;\n}\n\n.arrow::after,\n.arrow::before {\n content: \"\";\n display: inline-block;\n position: absolute;\n border-color: var(--color);\n}\n\n.arrow::after {\n width: 10px;\n height: 0;\n border: 2px solid var(--color);\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.arrow::before {\n width: 10px;\n height: 10px;\n border-top: 4px solid var(--color);\n border-right: 4px solid var(--color);\n left: 3px;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n}\n\n.button:hover {\n background-color: var(--color);\n color: white;\n}\n\n.button:hover .arrow {\n transform: translateX(10px);\n}\n\n.button:hover .text {\n transform: translateX(10px);\n}\n\n.button:hover .arrow::after {\n width: 25px;\n border-color: white;\n}\n\n.button:hover .arrow::before {\n left: 15px;\n border-color: white;\n}\n\n.button,\n.text,\n.arrow,\n.arrow::after,\n.arrow::before,\n.button::before,\n.button::after {\n transition: all 0.3s, box-shadow 0.2s;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 10px;\n border-radius: 5px;\n border: solid 3px var(--color);\n border-right-color: transparent;\n background-color: transparent;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 10px;\n border-radius: 5px;\n border: solid 3px var(--color);\n border-left-color: transparent;\n background-color: transparent;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.button:hover:before,\n.button:hover:after {\n width: 50% !important;\n}\n\n.button:active {\n box-shadow: 0px 0px 0px 7px rgba(79, 78, 105, 0.295);\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"dec120","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":644,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".my-button {\n display: inline-block;\n padding: 10px 20px;\n font-size: 16px;\n font-weight: bold;\n text-align: center;\n text-decoration: none;\n color: white;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n transition: 0.2s ease-in-out;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n.my-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.my-button:active {\n background-color: #00DBDE;\n background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"dc093f","snapshot":null,"tags":null,"title":"button by Dashrath-Sharma","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":157,"cssLen":877,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n color: red;\n outline: none;\n border: none;\n font-size: 17px;\n padding: 1em 2em;\n position: relative;\n background: none;\n cursor: pointer;\n}\n\nbutton:active {\n transform: scale(.98);\n box-shadow: .1px .1px 2px red;\n}\n\nbutton span {\n position: absolute;\n background: red;\n transition: .5s;\n box-shadow: 1px 1px 20px red;\n}\n\nbutton span:nth-child(1) {\n top: 0;\n left: 0;\n width: 3px;\n height: 30%;\n}\n\nbutton:hover span:nth-child(1) {\n height: 100%;\n}\n\nbutton span:nth-child(2) {\n top: 0;\n left: 0;\n width: 15%;\n height: 3px;\n}\n\nbutton:hover span:nth-child(2) {\n width: 100%;\n}\n\nbutton span:nth-child(3) {\n bottom: 0;\n right: 0;\n width: 3px;\n height: 30%;\n}\n\nbutton:hover span:nth-child(3) {\n height: 100%;\n}\n\nbutton span:nth-child(4) {\n bottom: 0;\n right: 0;\n width: 15%;\n height: 3px;\n}\n\nbutton:hover span:nth-child(4) {\n width: 100%;\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"6e7ec2","snapshot":null,"tags":null,"title":"button by SKYGAMI21154316","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":622,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 17px 40px;\n border-radius: 50px;\n cursor: pointer;\n border: 0;\n background-color: white;\n box-shadow: rgb(0 0 0 / 5%) 0 0 8px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n font-size: 15px;\n transition: all 0.5s ease;\n}\n\nbutton:hover {\n letter-spacing: 4px;\n background-color: rgb(24, 191, 220);\n color: hsl(0, 0%, 100%);\n box-shadow: rgb(24, 191, 220) 0px 7px 29px 0px;\n}\n\nbutton:active {\n letter-spacing: 3px;\n background-color: hsl(24, 191, 220);\n color: hsl(0, 0%, 100%);\n box-shadow: rgb(24, 191, 220) 0px 0px 0px 0px;\n transform: translateY(10px);\n transition: 100ms;\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"5bb722","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":60,"cssLen":618,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 1em 2em;\n border-radius: 1em;\n border: 5px solid #ffc107;\n box-shadow: 0px 0px 0 rgb(227,165,0), 1px 1px 0 rgb(198,136,0), 2px 2px 0 rgb(170,108,0), 3px 3px 0 rgb(142,80,0), 4px 4px 3px rgba(0,0,0,0.63), 4px 4px 1px rgba(0,0,0,0.5), 0px 0px 3px rgba(0,0,0,.2);\n}\n\n.TxtEffect {\n letter-spacing: .2rem;\n font-size: 17px;\n color: #ffc107;\n font-family: \"Arial Black\", Gadget, sans-serif;\n text-shadow: 0px 0px 0 rgb(227,165,0), 1px 1px 0 rgb(198,136,0), 2px 2px 0 rgb(170,108,0), 3px 3px 0 rgb(142,80,0), 4px 4px 3px rgba(0,0,0,0.63), 4px 4px 1px rgba(0,0,0,0.5), 0px 0px 3px rgba(0,0,0,.2);\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"99a5de","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5746,"cssLen":43289,"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: transparent;\n isolation: isolate;\n cursor: pointer;\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 border-radius: 0.8em;\n padding: 0.3em;\n mask: linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* I forgor that I need the two mask composites because of firefoxxxxxx */\n mask-composite: exclude;\n mask-composite: xor;\n -webkit-mask: linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: exclude;\n -webkit-mask-composite: xor;\n overflow: hidden;\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: #6996e277;\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:44.000Z","isPrivate":0,"projectId":"4b8c92","snapshot":null,"tags":null,"title":"button by opMorn","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4582,"cssLen":2499,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n padding: 12px 35px;\n background: #4c83fa;\n font-size: 17px;\n font-weight: 1000;\n color: #ffffff;\n border: 3px solid #4c83fa;\n border-radius: 8px;\n box-shadow: 0 0 0 #ffffff;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.star-1 {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0 #4c83fa);\n z-index: -5;\n transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);\n}\n\n.star-2 {\n position: absolute;\n top: 45%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #4c83fa);\n z-index: -5;\n transition: all 1scubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-3 {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #4c83fa);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-4 {\n position: absolute;\n top: 20%;\n left: 40%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0 #4c83fa);\n z-index: -5;\n transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-5 {\n position: absolute;\n top: 25%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #4c83fa);\n z-index: -5;\n transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-6 {\n position: absolute;\n top: 5%;\n left: 50%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #4c83fa);\n z-index: -5;\n transition: all 0.8s ease;\n}\n\nbutton:hover {\n background: transparent;\n color: #4c83fa;\n box-shadow: 0 0 0px #4c83fa;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -80%;\n left: -30%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0px #4c83fa);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: -0%;\n left: 10%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0px #4c83fa);\n z-index: 2;\n}\n\nbutton:hover .star-3 {\n position: absolute;\n top: 55%;\n left: 25%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0px #4c83fa);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: 30%;\n left: 80%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0px #4c83fa);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 25%;\n left: 115%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0px #4c83fa);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 5%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0px #4c83fa);\n z-index: 2;\n}\n\n.fil0 {\n fill: #4c83fa;\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"e66e71","snapshot":null,"tags":null,"title":"button by InfinityLoopGames","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1291,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".glowbutton {\n --glow-color: rgb(176, 252, 255);\n --glow-spread-color: rgba(123, 251, 255, 0.781);\n --enhanced-glow-color: rgb(206, 255, 255);\n --btn-color: rgb(61, 127, 136);\n border: 0.25em solid var(--glow-color);\n padding: 1em 3em;\n color: var(--glow-color);\n font-size: 15px;\n font-weight: bold;\n background-color: var(--btn-color);\n border-radius: 1em;\n outline: none;\n box-shadow: 0 0 1em 0.25em var(--glow-color),\n 0 0 4em 1em var(--glow-spread-color),\n inset 0 0 0.75em 0.25em var(--glow-color);\n text-shadow: 0 0 0.5em var(--glow-color);\n position: relative;\n transition: all 0.3s;\n}\n\n.glowbutton::after {\n pointer-events: none;\n content: \"\";\n position: absolute;\n top: 120%;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: var(--glow-spread-color);\n filter: blur(2em);\n opacity: 0.7;\n transform: perspective(1.5em) rotateX(35deg) scale(1, 0.6);\n}\n\n.glowbutton:hover {\n color: var(--btn-color);\n background-color: var(--glow-color);\n box-shadow: 0 0 1em 0.25em var(--glow-color),\n 0 0 4em 2em var(--glow-spread-color),\n inset 0 0 0.75em 0.25em var(--glow-color);\n}\n\n.glowbutton:active {\n box-shadow: 0 0 0.6em 0.25em var(--glow-color),\n 0 0 2.5em 2em var(--glow-spread-color),\n inset 0 0 0.5em 0.25em var(--glow-color);\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"a117e3","snapshot":null,"tags":null,"title":"button by SuliLevente","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":960,"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 border: 3px solid #DFB112;\n padding: 10px;\n background-color: #212121;\n color: white;\n font-weight: bold;\n font-size: 17px;\n z-index: 1;\n overflow: hidden;\n position: relative;\n border-radius: 8px;\n}\n\nbutton::before {\n content: \"\";\n z-index: -1;\n -webkit-transform: translateY(-100%) translateX(-100%);\n -ms-transform: translateY(-100%) translateX(-100%);\n transform: translateY(-100%) translateX(-100%);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background-color: #DFB112;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n position: absolute;\n}\n\nbutton:hover::before {\n -webkit-transform: translateY(0) translateX(0);\n -ms-transform: translateY(0) translateX(0);\n transform: translateY(0) translateX(0);\n}\n\nbutton:hover::after {\n -webkit-transform: translateY(100%) translateX(100%);\n -ms-transform: translateY(100%) translateX(100%);\n transform: translateY(100%) translateX(100%);\n}"},{"created":"2024-01-22T17:00:43.000Z","isPrivate":0,"projectId":"aaa805","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":806,"cssLen":684,"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.fill-none {\n fill: none\n}\n\n.stroke-blue-300 {\n stroke: #93c5fd\n}\n\n.duration-200 {\n transition-duration: 200ms\n}\n\n.hover\\:scale-125:hover {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\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\\:scale-100:active {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\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:43.000Z","isPrivate":0,"projectId":"3000b1","snapshot":null,"tags":null,"title":"button by mi-series","updated":"2024-01-22T17:00:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":1105,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 150px;\n height: 50px;\n border: 2px solid #000;\n font-family: 'Lato', sans-serif;\n font-size: 17px;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: 500;\n background: transparent;\n cursor: pointer;\n position: relative;\n display: inline-block;\n margin: 20px;\n outline: none;\n text-align: center;\n z-index: 2;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\nbutton::after {\n position: absolute;\n content: \" \";\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: all 0.3s ease;\n}\n\nbutton:hover {\n box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),\n -4px -4px 6px 0 rgba(116, 125, 136, .2), \n inset -4px -4px 6px 0 rgba(255,255,255,.5),\n inset 4px 4px 6px 0 rgba(116, 125, 136, .3);\n color: #fff;\n}\n\nbutton:hover::after {\n transform: scale(2) rotate(180deg);\n background: #000;\n box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),\n -4px -4px 6px 0 rgba(116, 125, 136, .2), \n inset -4px -4px 6px 0 rgba(255,255,255,.5),\n inset 4px 4px 6px 0 rgba(116, 125, 136, .3);\n}"},{"created":"2024-01-22T17:00:43.000Z","isPrivate":0,"projectId":"27e203","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":773,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n position: relative;\n overflow: hidden;\n height: 3rem;\n padding: 0 2rem;\n border-radius: 1.5rem;\n background: transparent;\n background-size: 400%;\n color: #fff;\n border: none;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button:hover::before {\n transform: scaleY(1);\n}\n\n.button-content {\n position: relative;\n z-index: 1;\n}\n\n.button::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n transform: scaleY(0);\n transform-origin: bottom;\n width: 100%;\n height: inherit;\n border-radius: inherit;\n background: linear-gradient(\n 82.3deg,\n rgba(150, 93, 233, 1) 10.8%,\n rgba(99, 88, 238, 1) 94.3%\n );\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button:active {\n scale: 0.9;\n}"}]}},"actionData":null,"errors":null}