{"loaderData":{"0":null,"0-2":{"total":7079,"projects":[{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"1e1487","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":985,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Easter\n Happy\n \n

","css":".scene {\n width: 10em;\n justify-content: center;\n align-items: center;\n}\n\n.cube {\n color: #ccc;\n cursor: pointer;\n font-family: 'Roboto', sans-serif;\n transition: all 0.85s cubic-bezier(.20,.60,.20,1);\n transform-style: preserve-3d;\n transform-origin: 100% 50%;\n width: 10em;\n height: 4em;\n}\n\n.cube:hover {\n transform: rotateX(-90deg) rotateZ(-20deg);\n}\n\n.side {\n box-sizing: border-box;\n position: absolute;\n display: inline-block;\n height: 4em;\n width: 10em;\n text-align: center;\n text-transform: uppercase;\n padding-top: 1.5em;\n font-weight: bold;\n}\n\n.top {\n background: wheat;\n color: #222229;\n transform: rotateX(90deg) translate3d(0, 0, 2em);\n box-shadow: inset 0 0 0 5px #fff;\n}\n\n.front {\n background: #222229;\n color: #fff;\n box-shadow: inset 0 0 0 5px #fff;\n transform: translate3d(0, 0, 2em);\n}\n\n.right {\n height: 4em;\n width: 4em;\n background: #222229;\n box-shadow: inset 0 0 0 5px #fff;\n transform: rotateY(90deg) translate3d(0, 0, 8em);\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"29756d","snapshot":null,"tags":null,"title":"button by Boosterrohit","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":67,"cssLen":902,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".box {\n position: relative;\n width: 120px;\n height: 45px;\n overflow: hidden;\n border: none;\n background-color: rgb(218, 203, 177);\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n border-top-left-radius: 20px;\n cursor: pointer;\n border-bottom-right-radius: 20px;\n box-shadow: 0 0 10px rgb(104, 134, 218);\n}\n\n.box::before {\n content: \"\";\n position: absolute;\n width: 15px;\n height: 200px;\n margin-top: -92px;\n background: linear-gradient(#00ccff,#d400d4);\n animation: amm 4s linear infinite;\n}\n\n@keyframes amm {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.text-button {\n position: relative;\n font-size: 1.2rem;\n font-weight: bold;\n z-index: 1;\n}\n\n.box::after {\n content: \"\";\n position: absolute;\n inset: 4px;\n background-color: rgb(218, 203, 177);\n border-top-left-radius: 20px;\n border-bottom-right-radius: 20px;\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"568ace","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":920,"cssLen":826,"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 width: 130px;\n height: 35px;\n border-radius: 30px;\n background-color: white;\n border: 1px #08c solid;\n overflow: hidden;\n}\n\n.text1 {\n font-size: 15px;\n font-weight: 600;\n margin-left: 22%;\n}\n\n.text2 {\n position: absolute;\n top: 25%;\n left: -50px;\n font-weight: 700;\n font-size: 14px;\n color: white;\n}\n\n.icon {\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.5s;\n}\n\n.icon::before {\n position: absolute;\n left: -100px;\n top: 0;\n z-index: -1;\n content: '';\n width: 130px;\n height: 33px;\n border-radius: 30px;\n background-color: #08c;\n}\n\nbutton:hover .icon {\n transform: translateX(96px);\n transition: transform 0.5s;\n}\n\nbutton:hover .text2 {\n transform: translateX(100px);\n transition: transform 0.6s;\n}\n\nbutton:active {\n transform: scale(1.03);\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"eceb9b","snapshot":null,"tags":null,"title":"button by 212004ALJI","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n /* padding: 5px 10px; */\n height: 50px;\n width: 100px;\n font-size: 20px;\n position: relative;\n border: navajowhite;\n background-color: #222;\n color: aliceblue;\n z-index: 1;\n overflow: hidden;\n transition: all 0.3s;\n box-shadow: 2px 2px 2px red;\n}\n\nbutton::before {\n content: '';\n height: 10px;\n width: 30px;\n position: absolute;\n background-image: linear-gradient(45deg, salmon,red);\n left: -10px;\n top: 0;\n z-index: -1;\n transition: 0.3s ease-in-out;\n border-radius: 5px;\n}\n\nbutton:hover::before {\n height: 100px;\n width: 100px;\n}\n\nbutton:hover {\n border-radius: 5px;\n}\n"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"bf9571","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":1001,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 1em 1.6em;\n border: 0;\n transition: all .5s ease-in-out;\n font-size: 17px;\n letter-spacing: 0.1rem;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n color: rgb(0, 0, 0);\n font-weight: bolder;\n backdrop-filter: blur(5px);\n background-color: rgba(255, 255, 255, 1);\n border-radius: 26px;\n box-shadow: 0px 0px 0px 0px rgba(145, 192, 255, 0.5),\n inset -8px -8px 16px 0px rgba(145, 193, 255, 0.973),\n inset 0px 11px 28px 0px rgb(255, 255, 255);\n}\n\nbutton:hover {\n transition: all .5s ease-in-out;\n backdrop-filter: blur(5px);\n background-color: rgba(255, 255, 255, 1);\n border-radius: 26px;\n box-shadow: 0px 0px 0px 0px rgba(145, 192, 255, 0.5),\n inset 8px -8px 16px 10px rgb(145, 193, 255),\n inset 0px 11px 28px 0px rgb(255, 255, 255);\n}\n\nbutton:active {\n border-radius: 26px;\n box-shadow: 0px 0px 0px 0px rgba(145, 193, 255, 0.822),\n inset -8px -8px 16px 10px #91c0ff99,\n inset 0px 11px 28px 50px rgb(255, 255, 255);\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"00b50b","snapshot":null,"tags":null,"title":"button by simontheonlyone","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":241,"cssLen":2381,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".container {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 6em;\n height: 6em;\n border: none;\n border-radius: 1em;\n background: #ddd;\n box-shadow: 0 0 20px rgba(0, 0, 0, .4);\n cursor: pointer;\n}\n\n.heart {\n width: 2.4em;\n height: 4.3em;\n border: none;\n border-radius: 10em;\n pointer-events: none;\n}\n\n.heart_left {\n background-color: rgb(252, 102, 56);\n box-shadow: 0 0 5px rgba(0, 0, 0, .4);\n transform: rotate(-38deg);\n margin-right: -16px;\n z-index: 2;\n}\n\n.heart_right {\n background-color: rgb(199, 81, 45);\n box-shadow: 0 0 5px rgba(0, 0, 0, .3);\n transform: rotate(38deg);\n z-index: 1;\n}\n\n.container:hover > .heart_left {\n animation: like 450ms ease forwards;\n}\n\n@keyframes like {\n 0% {\n margin-right: -16px;\n }\n\n 25% {\n transform: rotate(0deg);\n margin-right: -32px;\n }\n\n 50% {\n transform: rotate(-38deg);\n margin-right: -16px;\n }\n\n 75% {\n transform: rotate(0deg);\n margin-right: -32px;\n }\n\n 100% {\n transform: rotate(-38deg);\n }\n}\n\n.container:hover > .heart_right {\n animation: loke 450ms ease;\n}\n\n@keyframes loke {\n 25% {\n transform: rotate(0deg);\n box-shadow: none;\n }\n\n 50% {\n transform: rotate(38deg);\n }\n\n 75% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(38deg);\n }\n}\n\n.orange_effect,\n.white_effect {\n position: absolute;\n inset: 40.5%;\n border: none;\n border-radius: .2em;\n width: 1em;\n height: 1em;\n scale: 1;\n opacity: 1;\n}\n\n.orange_effect {\n background: rgba(255, 102, 55, .3);\n transition: scale 250ms linear, opacity 500ms linear 270ms;\n}\n\n.container:hover > .orange_effect {\n scale: 6;\n opacity: 0;\n}\n\n.white_effect {\n background: rgba(255, 134, 42, 0.3);\n transition: scale 280ms linear 200ms, opacity 500ms linear 270ms;\n}\n\n.container:hover > .white_effect {\n scale: 6;\n opacity: 0;\n}\n\n.like {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 10em;\n min-height: 2.2em;\n background: #e5e5e5;\n box-shadow: 0 0 20px rgba(0, 0, 0, .15);\n font-size: 15px;\n letter-spacing: 3px;\n border: none;\n border-radius: .65em;\n pointer-events: none;\n scale: 0;\n opacity: 0;\n}\n\n.container:focus .like {\n animation: pop-up 400ms ease forwards;\n}\n\n@keyframes pop-up {\n 0% {\n top: 0;\n }\n\n 80%, 100% {\n top: -60px;\n scale: 1;\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"1e46b5","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":2864,"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 flex-direction: column;\n align-items: flex-start;\n justify-content: flex-end;\n background-color: #000;\n color: #fff;\n font-size: 16px;\n letter-spacing: 1px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n padding-bottom: 8px;\n height: 65px;\n width: 200px;\n padding: 12px;\n border-radius: 15px 15px 12px 12px;\n cursor: pointer;\n position: relative;\n will-change: transform;\n transition: all .1s ease-in-out 0s;\n user-select: none;\n /* Add gradient shading to each side */\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),\n inset -4px -8px 0px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(255, 255, 255, 0.1);\n transform: perspective(70px) rotateX(5deg) rotateY(0deg);\n}\n\n.button span {\n transform: translateY(-10px);\n}\n\n.button::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));\n z-index: -1;\n border-radius: 15px;\n box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),\n inset 4px -8px 0px rgba(0, 0, 0, 0.3);\n transition: all .1s ease-in-out 0s;\n}\n\n.button::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n z-index: -1;\n border-radius: 15px;\n transition: all .1s ease-in-out 0s;\n}\n\n.button:active {\n will-change: transform;\n transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);\n height: 64px;\n border: 0.25px solid rgba(0, 0, 0, 0.2);\n box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),\n inset -4px -6px 0px rgba(0, 0, 0, 0.8),\n 0px 1px 0px rgba(0, 0, 0, 0.9),\n 0px 1px 0px rgba(255, 255, 255, 0.2);\n transition: all .1s ease-in-out 0s;\n}\n\n.button::after:active {\n background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));\n}\n\n.button:active::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 5%;\n left: 20%;\n width: 50%;\n height: 80%;\n background-color: rgba(255, 255, 255, 0.1);\n animation: overlay 0.1s ease-in-out 0s;\n pointer-events: none;\n}\n\n.button svg {\n width: 15px;\n height: 15px;\n}\n\n@keyframes overlay {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.button:focus {\n outline: none;\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"0bc4e3","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":470,"cssLen":1976,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-\\[150\\%\\] {\n top: -150%\n}\n\n.left-0 {\n left: 0px\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-\\[5px\\] {\n height: 5px\n}\n\n.w-80 {\n width: 20rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-b-4 {\n border-bottom-width: 4px\n}\n\n.border-yellow-400 {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity))\n}\n\n.bg-yellow-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(250 204 21 / var(--tw-bg-opacity))\n}\n\n.bg-yellow-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(66 32 6 / 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.font-medium {\n font-weight: 500\n}\n\n.text-yellow-400 {\n --tw-text-opacity: 1;\n color: rgb(250 204 21 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\n\n.shadow-\\[0_0_10px_10px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.3\\)\\] {\n --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.3);\n --tw-shadow-colored: 0 0 10px 10px 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.shadow-yellow-400 {\n --tw-shadow-color: #facc15;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:border-b:hover {\n border-bottom-width: 1px\n}\n\n.hover\\:border-t-4:hover {\n border-top-width: 4px\n}\n\n.hover\\:brightness-150:hover {\n --tw-brightness: brightness(1.5);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.active\\:opacity-75:active {\n opacity: 0.75\n}\n\n.group:hover .group-hover\\:top-\\[150\\%\\] {\n top: 150%\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"5fa3f9","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":511,"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 padding: 10px 40px;\n margin: 0px 10px 10px 0px;\n float: left;\n border-radius: 3px;\n font-size: 20px;\n color: #FFF;\n text-decoration: none;\n background-color: #2ecc71;\n border: none;\n border-bottom: 5px solid #27ae60;\n text-shadow: 0px -2px #27ae60;\n -webkit-transition: all 0.1s;\n transition: all 0.1s;\n}\n\nbutton:hover, button:active {\n -webkit-transform: translate(0px,5px);\n -ms-transform: translate(0px,5px);\n transform: translate(0px,5px);\n border-bottom: 1px solid #2ecc71;\n}"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"9505fc","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":785,"cssLen":1468,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n

","css":".box {\n --clr-shadow__border: #ef7305;\n --clr-text: #F6F4EB;\n --clr-falling-leaves: #441a12;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n background: transparent;\n padding: calc(var(--size) / 3) var(--size);\n font-weight: 600;\n font-size: 1.5rem;\n border: none;\n cursor: pointer;\n color: var(--clr-text);\n letter-spacing: 0.2rem;\n text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),\n -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.falling-leaves {\n width: 100%;\n height: 100%;\n bottom: 0%;\n transition: 0.5s ease-in-out;\n z-index: -1;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n display: flex;\n background: var(--clr-falling-leaves);\n}\n\n.box:hover .falling-leaves {\n opacity: 1;\n}\n\n.leaf {\n height: 1rem;\n width: 1rem;\n clip-path: polygon(\n 45% 0%,\n 45% 10%,\n 15% 30%,\n 35% 60%,\n 20% 80%,\n 45% 100%,\n 70% 80%,\n 55% 60%,\n 85% 30%,\n 55% 10%,\n 55% 0%\n );\n background-color: hsl(var(--hue), 70%, 50%);\n animation: falling-leaves-animation linear infinite;\n animation-duration: calc(0.5s * var(--i));\n}\n\n@keyframes falling-leaves-animation {\n 0% {\n transform: rotate(-10deg) translateY(calc(-51% * var(--i)));\n }\n\n 50% {\n transform: rotate(-40deg) translateY(calc(0% * var(--i)));\n }\n\n 100% {\n transform: rotate(150deg) translateY(calc(100% * var(--i)));\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"6a1ac7","snapshot":null,"tags":null,"title":"button by InfinityLoopGames","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":640,"cssLen":5393,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".glowbutton {\n --duration: 7s;\n --easing: linear;\n --c-color-1: rgba(0, 44, 238, 0.7);\n --c-color-2: #00023c;\n --c-color-3: #7203bd;\n --c-color-4: rgba(0, 224, 224, 0.7);\n --c-shadow: rgba(0, 175, 123, 0.5);\n --c-shadow-inset-top: rgba(0, 140, 175, 0.671);\n --c-shadow-inset-bottom: rgba(157, 0, 209, 0.8);\n --c-radial-inner: #002396;\n --c-radial-outer: #00c0b7;\n --c-color: #fff;\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: none;\n outline: none;\n position: relative;\n cursor: pointer;\n border: none;\n display: table;\n border-radius: 24px;\n padding: 0;\n margin: 0;\n text-align: center;\n font-weight: 600;\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 1.5;\n color: var(--c-color);\n background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);\n box-shadow: 0 0 14px var(--c-shadow);\n}\n\n.glowbutton:before {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n border-radius: 24px;\n box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);\n}\n\n.glowbutton .wrapper {\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n overflow: hidden;\n border-radius: 24px;\n min-width: 132px;\n padding: 12px 0;\n}\n\n.glowbutton .wrapper span {\n display: inline-block;\n position: relative;\n z-index: 1;\n}\n\n.glowbutton .wrapper .circle {\n position: absolute;\n left: 0;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n filter: blur(var(--blur, 8px));\n background: var(--background, transparent);\n transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);\n animation: var(--animation, none) var(--duration) var(--easing) infinite;\n}\n\n.glowbutton .wrapper .circle.circle-1, .glowbutton .wrapper .circle.circle-9, .glowbutton .wrapper .circle.circle-10 {\n --background: var(--c-color-4);\n}\n\n.glowbutton .wrapper .circle.circle-3, .glowbutton .wrapper .circle.circle-4 {\n --background: var(--c-color-2);\n --blur: 14px;\n}\n\n.glowbutton .wrapper .circle.circle-5, .glowbutton .wrapper .circle.circle-6 {\n --background: var(--c-color-3);\n --blur: 16px;\n}\n\n.glowbutton .wrapper .circle.circle-2, .glowbutton .wrapper .circle.circle-7, .glowbutton .wrapper .circle.circle-8, .glowbutton .wrapper .circle.circle-11, .glowbutton .wrapper .circle.circle-12 {\n --background: var(--c-color-1);\n --blur: 12px;\n}\n\n.uiverse .wrapper .circle.circle-1 {\n --x: 0;\n --y: -40px;\n --animation: circle-1;\n}\n\n.uiverse .wrapper .circle.circle-2 {\n --x: 92px;\n --y: 8px;\n --animation: circle-2;\n}\n\n.uiverse .wrapper .circle.circle-3 {\n --x: -12px;\n --y: -12px;\n --animation: circle-3;\n}\n\n.uiverse .wrapper .circle.circle-4 {\n --x: 80px;\n --y: -12px;\n --animation: circle-4;\n}\n\n.uiverse .wrapper .circle.circle-5 {\n --x: 12px;\n --y: -4px;\n --animation: circle-5;\n}\n\n.uiverse .wrapper .circle.circle-6 {\n --x: 56px;\n --y: 16px;\n --animation: circle-6;\n}\n\n.uiverse .wrapper .circle.circle-7 {\n --x: 8px;\n --y: 28px;\n --animation: circle-7;\n}\n\n.uiverse .wrapper .circle.circle-8 {\n --x: 28px;\n --y: -4px;\n --animation: circle-8;\n}\n\n.uiverse .wrapper .circle.circle-9 {\n --x: 20px;\n --y: -12px;\n --animation: circle-9;\n}\n\n.uiverse .wrapper .circle.circle-10 {\n --x: 64px;\n --y: 16px;\n --animation: circle-10;\n}\n\n.uiverse .wrapper .circle.circle-11 {\n --x: 4px;\n --y: 4px;\n --animation: circle-11;\n}\n\n.uiverse .wrapper .circle.circle-12 {\n --blur: 14px;\n --x: 52px;\n --y: 4px;\n --animation: circle-12;\n}\n\n@keyframes circle-1 {\n 33% {\n transform: translate(0px, 16px) translateZ(0);\n }\n\n 66% {\n transform: translate(12px, 64px) translateZ(0);\n }\n}\n\n@keyframes circle-2 {\n 33% {\n transform: translate(80px, -10px) translateZ(0);\n }\n\n 66% {\n transform: translate(72px, -48px) translateZ(0);\n }\n}\n\n@keyframes circle-3 {\n 33% {\n transform: translate(20px, 12px) translateZ(0);\n }\n\n 66% {\n transform: translate(12px, 4px) translateZ(0);\n }\n}\n\n@keyframes circle-4 {\n 33% {\n transform: translate(76px, -12px) translateZ(0);\n }\n\n 66% {\n transform: translate(112px, -8px) translateZ(0);\n }\n}\n\n@keyframes circle-5 {\n 33% {\n transform: translate(84px, 28px) translateZ(0);\n }\n\n 66% {\n transform: translate(40px, -32px) translateZ(0);\n }\n}\n\n@keyframes circle-6 {\n 33% {\n transform: translate(28px, -16px) translateZ(0);\n }\n\n 66% {\n transform: translate(76px, -56px) translateZ(0);\n }\n}\n\n@keyframes circle-7 {\n 33% {\n transform: translate(8px, 28px) translateZ(0);\n }\n\n 66% {\n transform: translate(20px, -60px) translateZ(0);\n }\n}\n\n@keyframes circle-8 {\n 33% {\n transform: translate(32px, -4px) translateZ(0);\n }\n\n 66% {\n transform: translate(56px, -20px) translateZ(0);\n }\n}\n\n@keyframes circle-9 {\n 33% {\n transform: translate(20px, -12px) translateZ(0);\n }\n\n 66% {\n transform: translate(80px, -8px) translateZ(0);\n }\n}\n\n@keyframes circle-10 {\n 33% {\n transform: translate(68px, 20px) translateZ(0);\n }\n\n 66% {\n transform: translate(100px, 28px) translateZ(0);\n }\n}\n\n@keyframes circle-11 {\n 33% {\n transform: translate(4px, 4px) translateZ(0);\n }\n\n 66% {\n transform: translate(68px, 20px) translateZ(0);\n }\n}\n\n@keyframes circle-12 {\n 33% {\n transform: translate(56px, 0px) translateZ(0);\n }\n\n 66% {\n transform: translate(60px, -32px) translateZ(0);\n }\n}\n"},{"created":"2024-01-22T17:00:11.000Z","isPrivate":0,"projectId":"9aa1aa","snapshot":null,"tags":null,"title":"button by SharpTH","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":1049,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".draw-border {\n box-shadow: inset 0 0 0 4px #58afd1;\n color: #58afd1;\n transition: color 0.25s 0.0833333333s;\n position: relative;\n}\n\n.draw-border::before, .draw-border::after {\n border: 0 solid transparent;\n box-sizing: border-box;\n content: \"\";\n pointer-events: none;\n position: absolute;\n width: 0;\n height: 0;\n bottom: 0;\n right: 0;\n}\n\n.draw-border::before {\n border-bottom-width: 4px;\n border-left-width: 4px;\n}\n\n.draw-border::after {\n border-top-width: 4px;\n border-right-width: 4px;\n}\n\n.draw-border:hover {\n color: #ffe593;\n}\n\n.draw-border:hover::before, .draw-border:hover::after {\n border-color: #ffe593;\n transition: border-color 0s, width 0.25s, height 0.25s;\n width: 100%;\n height: 100%;\n}\n\n.draw-border:hover::before {\n transition-delay: 0s, 0s, 0.25s;\n}\n\n.draw-border:hover::after {\n transition-delay: 0s, 0.25s, 0s;\n}\n\n.btn {\n background: none;\n border: none;\n cursor: pointer;\n line-height: 1.5;\n font: 700 17px \"Roboto Slab\", sans-serif;\n padding: 1em 2em;\n letter-spacing: 0.05rem;\n}\n\n.btn:focus {\n outline: 2px dotted #55d7dc;\n}\n\n"}]}},"actionData":null,"errors":null}