{"loaderData":{"0":null,"0-2":{"total":7076,"projects":[{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"560e9e","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":63,"cssLen":729,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 90px;\n height: 40px;\n position: relative;\n font-family: var(--font);\n color: #3b82f6;\n font-weight: 600;\n background-color: #fff;\n border: none;\n overflow: hidden;\n border-radius: 5px;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;\n transition: all ease 100ms;\n}\n\nbutton:hover {\n background-color: #cbdcf8;\n}\n\nbutton:focus {\n background-color: #cbdcf8;\n}\n\nbutton::before {\n content: 'done✅';\n position: absolute;\n color: #3b82f6;\n left: 0;\n top: -14px;\n right: 0;\n transition: all ease 300ms;\n opacity: 0%;\n}\n\nbutton:focus::before {\n opacity: 100%;\n transform: translatey(26px);\n}\n\n.submit {\n transition: all ease 100ms;\n opacity: 100%;\n}\n\nbutton:focus > .submit {\n opacity: 0%;\n}\n\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"a67ef9","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":797,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: inline-block;\n text-align: center;\n font-weight: bold;\n padding: 0.7em 2em;\n border: 3px solid black;\n border-radius: 2px;\n position: relative;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);\n color: black;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\nbutton:before {\n transition: 0.5s all ease;\n position: absolute;\n top: 0;\n left: 50%;\n right: 50%;\n bottom: 0;\n opacity: 0;\n content: '';\n background-color: black;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: white;\n}\n\nbutton:hover:before, button:focus:before {\n transition: 0.5s all ease;\n left: 0;\n right: 0;\n opacity: 1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"479985","snapshot":null,"tags":null,"title":"button by Web-Potato","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":816,"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 height: 50px;\n width: 150px;\n color: #FFF;\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 2px;\n background-color: #212121;\n transition: all 0.5s;\n border: none;\n}\n\nbutton::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(29, 255, 86, 0.281);\n border-radius: 5px;\n transition: all 0.3s;\n z-index: 1;\n}\n\nbutton:hover::before {\n opacity: 0;\n transform: scale(0.7,0.7);\n}\n\nbutton::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: all 0.4s;\n border: 1px solid rgba(29, 255, 86, 0.281);\n border-radius: 5px;\n transform: scale(1.5,1.5);\n opacity: 0;\n z-index: 1;\n}\n\nbutton:hover::after {\n opacity: 1;\n transform: scale(1,1);\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"ec1b09","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1069,"cssLen":1366,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".download-button {\n position: relative;\n border-width: 0;\n color: rgb(19, 19, 19);\n font-size: 15px;\n font-weight: 600;\n border-radius: 4px;\n z-index: 1;\n}\n\n.download-button .docs {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n min-height: 40px;\n padding: 0 10px;\n border-radius: 4px;\n z-index: 1;\n background-color: #ffffff;\n border: solid 1px #e8e8e82d;\n transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.download-button:hover {\n box-shadow: rgba(233, 233, 233, 0.555) 0px 54px 55px,\n rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,\n rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;\n}\n\n.download {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 90%;\n margin: 0 auto;\n z-index: -1;\n border-radius: 0px 0px 4px 4px;\n transform: translateY(0%);\n background-color: #01e056;\n border: solid 1px #01e0572d;\n transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);\n cursor: pointer;\n}\n\n.download-button:hover .download {\n transform: translateY(100%);\n}\n\n.download svg polyline,\n.download svg line {\n animation: docs 1s infinite;\n}\n\n@keyframes docs {\n 0% {\n transform: translateY(0%);\n }\n\n 50% {\n transform: translateY(-15%);\n }\n\n 100% {\n transform: translateY(0%);\n }\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"c6c80a","snapshot":null,"tags":null,"title":"button by EcheverriaJesus","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":703,"cssLen":2473,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":".flex {\n display: flex;\n}\n.h-12 {\n height: 3rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.w-28 {\n width: 7rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-6 {\n width: 1.5rem;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-\\[\\#14b8a6\\] {\n --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-\\[\\#059669\\] {\n --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #059669 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.to-\\[\\#047857\\] {\n --tw-gradient-to: #047857 var(--tw-gradient-to-position);\n}\n.fill-white {\n fill: #fff;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:from-\\[\\#047857\\]:hover {\n --tw-gradient-from: #047857 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.hover\\:to-\\[\\#14b8a6\\]:hover {\n --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);\n}\n.hover\\:shadow-xl:hover {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.hover\\:shadow-green-500:hover {\n --tw-shadow-color: #22c55e;\n --tw-shadow: var(--tw-shadow-colored);\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"5c3c2b","snapshot":null,"tags":null,"title":"button by Leoodaviid","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":910,"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 padding: 1rem 2.5rem 1rem 2.5rem;\n border: 0;\n border-radius: 2rem;\n font-size: 18px;\n font-weight: 500;\n background: transparent;\n color: #1d1d1d;\n}\n\nbutton:hover {\n cursor: wait;\n}\n\nbutton > p {\n position: relative;\n z-index: 3;\n}\n\nbutton::before,\nbutton::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 300%;\n height: 100%;\n opacity: 0;\n}\n\nbutton::before {\n background: #79efff repeating-linear-gradient(50deg, transparent, transparent 10px, #71e0ef 10px, #71e0ef 20px);\n}\n\nbutton::after {\n z-index: 2;\n background: linear-gradient(#79efff 30%, transparent 100%);\n}\n\nbutton.loading::before,\nbutton.loading::after {\n opacity: 1;\n}\n\n@keyframes loading_49100 {\n 0% {\n translate: 25px 0;\n }\n\n 100% {\n translate: -30px 0;\n }\n}\n\nbutton.loading::before {\n animation: loading_49100 0.6s infinite linear;\n}"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"f45086","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":2225,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-31,\n.btn-31 *,\n.btn-31 :after,\n.btn-31 :before,\n.btn-31:after,\n.btn-31:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-31 {\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 font-weight: 900;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n}\n\n.btn-31:disabled {\n cursor: default;\n}\n\n.btn-31:-moz-focusring {\n outline: auto;\n}\n\n.btn-31 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-31 [hidden] {\n display: none;\n}\n\n.btn-31 {\n border-width: 1px;\n padding: 1rem 2rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-31:before {\n --progress: 100%;\n background: #fff;\n -webkit-clip-path: polygon(\n 100% 0,\n var(--progress) var(--progress),\n 0 100%,\n 100% 100%\n );\n clip-path: polygon(\n 100% 0,\n var(--progress) var(--progress),\n 0 100%,\n 100% 100%\n );\n content: \"\";\n inset: 0;\n position: absolute;\n transition: -webkit-clip-path 0.2s ease;\n transition: clip-path 0.2s ease;\n transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;\n}\n\n.btn-31:hover:before {\n --progress: 0%;\n}\n\n.btn-31 .text-container {\n display: block;\n overflow: hidden;\n position: relative;\n}\n\n.btn-31 .text {\n display: block;\n font-weight: 900;\n mix-blend-mode: difference;\n position: relative;\n}\n\n.btn-31:hover .text {\n -webkit-animation: move-up-alternate 0.3s ease forwards;\n animation: move-up-alternate 0.3s ease forwards;\n}\n\n@-webkit-keyframes move-up-alternate {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(80%);\n }\n\n 51% {\n transform: translateY(-80%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes move-up-alternate {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(80%);\n }\n\n 51% {\n transform: translateY(-80%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"c7a456","snapshot":null,"tags":null,"title":"button by HarryProCW","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":164,"cssLen":1079,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".rounded-full {\n border-radius: 9999px\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-blue-500 {\n --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-pink-500 {\n --tw-gradient-to: #ec4899 var(--tw-gradient-to-position)\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n@keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n.hover\\:animate-pulse:hover {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n\n.hover\\:brightness-110:hover {\n --tw-brightness: brightness(1.1);\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}"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"dcbb36","snapshot":null,"tags":null,"title":"button by abdulGitHb","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":737,"cssLen":4037,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n HOVER ME\n\n","css":".relative {\n position: relative;\n}\n.z-10 {\n z-index: 10;\n}\n.h-\\[3em\\] {\n height: 3em;\n}\n.w-\\[9em\\] {\n width: 9em;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.rounded-\\[30px\\] {\n border-radius: 30px;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-violet-500 {\n --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-10\\% {\n --tw-gradient-from-position: 10%;\n}\n.via-sky-500 {\n --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.via-30\\% {\n --tw-gradient-via-position: 30%;\n}\n.to-pink-500 {\n --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);\n}\n.to-90\\% {\n --tw-gradient-to-position: 90%;\n}\n.bg-\\[length\\:400\\%\\] {\n background-size: 400%;\n}\n.text-center {\n text-align: center;\n}\n.text-\\[14px\\] {\n font-size: 14px;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute;\n}\n.before\\:-bottom-\\[5px\\]::before {\n content: var(--tw-content);\n bottom: -5px;\n}\n.before\\:-left-\\[5px\\]::before {\n content: var(--tw-content);\n left: -5px;\n}\n.before\\:-right-\\[5px\\]::before {\n content: var(--tw-content);\n right: -5px;\n}\n.before\\:-top-\\[5px\\]::before {\n content: var(--tw-content);\n top: -5px;\n}\n.before\\:-z-10::before {\n content: var(--tw-content);\n z-index: -10;\n}\n.before\\:rounded-\\[35px\\]::before {\n content: var(--tw-content);\n border-radius: 35px;\n}\n.before\\:bg-gradient-to-r::before {\n content: var(--tw-content);\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.before\\:from-violet-500::before {\n content: var(--tw-content);\n --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.before\\:from-10\\%::before {\n content: var(--tw-content);\n --tw-gradient-from-position: 10%;\n}\n.before\\:via-sky-500::before {\n content: var(--tw-content);\n --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.before\\:via-30\\%::before {\n content: var(--tw-content);\n --tw-gradient-via-position: 30%;\n}\n.before\\:to-pink-500::before {\n content: var(--tw-content);\n --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);\n}\n.before\\:bg-\\[length\\:400\\%\\]::before {\n content: var(--tw-content);\n background-size: 400%;\n}\n.before\\:transition-all::before {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.before\\:duration-\\[1s\\]::before {\n content: var(--tw-content);\n transition-duration: 1s;\n}\n.before\\:ease-in-out::before {\n content: var(--tw-content);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: \"\";\n content: var(--tw-content);\n}\n.hover\\:bg-\\[length\\:100\\%\\]:hover {\n background-size: 100%;\n}\n.before\\:hover\\:bg-\\[length\\:10\\%\\]:hover::before {\n content: var(--tw-content);\n background-size: 10%;\n}\n.before\\:hover\\:blur-xl:hover::before {\n content: var(--tw-content);\n --tw-blur: blur(24px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)\n var(--tw-sepia) var(--tw-drop-shadow);\n}\n.focus\\:ring-violet-700:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(109 40 217 / var(--tw-ring-opacity));\n}\n.active\\:bg-violet-700:active {\n --tw-bg-opacity: 1;\n background-color: rgb(109 40 217 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"12b09e","snapshot":null,"tags":null,"title":"button by MikeAndrewDesigner","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":59,"cssLen":3278,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"#ui {\n font-weight: bolder;\n background: -webkit-linear-gradient(#B563FF, #535EFC, #0EC8EE);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n border-bottom: 4px solid transparent;\n border-image: linear-gradient(0.25turn, #535EFC, #0EC8EE, #0EC8EE);\n border-image-slice: 1;\n display: inline;\n}\n\n.button {\n position: relative;\n padding: 20px 30px;\n border-radius: 6px;\n border: none;\n color: #fff;\n font-weight: 00;\n cursor: pointer;\n font-size: 1.5em;\n font-weight: 600;\n background-color: #2c2c2c;\n transition: all 0.2s ease;\n}\n\n.button:hover {\n background: linear-gradient(144deg, #1e1e1e , 20%,#1e1e1e 50%,#1e1e1e );\n transition: all 0.2s ease;\n color: #fff;\n}\n\n.button:active {\n transform: scale(0.96);\n}\n\n.button:before,\n.button:after {\n position: absolute;\n content: \"\";\n width: 150%;\n left: 50%;\n height: 100%;\n transform: translateX(-50%);\n z-index: -1000;\n background-repeat: no-repeat;\n}\n\n.button:hover:before {\n top: -70%;\n background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),\n radial-gradient(circle, #535EFC 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),\n radial-gradient(circle, #0EC8EE 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #0EC8EE 20%, transparent 20%),\n radial-gradient(circle, #0EC8EE 20%, transparent 20%);\n background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,\n 10% 10%, 18% 18%;\n background-position: 50% 120%;\n animation: greentopBubbles 0.6s ease;\n}\n\n@keyframes greentopBubbles {\n 0% {\n background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,\n 40% 90%, 55% 90%, 70% 90%;\n }\n\n 50% {\n background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,\n 50% 50%, 65% 20%, 90% 30%;\n }\n\n 100% {\n background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,\n 50% 40%, 65% 10%, 90% 20%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}\n\n.button:hover::after {\n bottom: -70%;\n background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #535EFC 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),\n radial-gradient(circle, #535EFC 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #535EFC 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%);\n background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;\n background-position: 50% 0%;\n animation: greenbottomBubbles 0.6s ease;\n}\n\n@keyframes greenbottomBubbles {\n 0% {\n background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,\n 70% -10%, 70% 0%;\n }\n\n 50% {\n background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,\n 105% 0%;\n }\n\n 100% {\n background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,\n 110% 10%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"411d7a","snapshot":null,"tags":null,"title":"button by faxriddin20","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":536,"cssLen":410,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".download-btn {\n border: 2px solid rgb(168, 38, 255);\n background-color: white;\n width: 50px;\n height: 50px;\n border-radius: 10px;\n position: relative;\n z-index: 1;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n.download-btn svg {\n width: 25px;\n height: 25px;\n transition: all 0.3s ease;\n}\n.download-btn:hover svg {\n fill: white;\n}\n.download-btn:hover {\n background-color: rgb(168, 38, 255);\n}\n"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"1419c8","snapshot":null,"tags":null,"title":"button by kennyotsu-monochromia","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1124,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n border-radius: 8px;\n width: 140px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 0px 15px;\n border: none;\n color: white;\n position: relative;\n cursor: pointer;\n font-weight: 700;\n transition-duration: .2s;\n background-color: var(--ch-black);\n}\n\n.button:before, .button:after {\n content: '';\n position: absolute;\n left: -2px;\n top: -2px;\n border-radius: 10px;\n background: linear-gradient(45deg, \n var(--ch-black), var(--eer-black),\n var(--night-rider), var(--ch-white), var(--night-rider), \n\tvar(--eer-black), var(--ch-black),var(--ch-black));\n background-size: 400%;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n z-index: -1;\n animation: steam 20s linear infinite;\n}\n\n@keyframes steam {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\n.button:after {\n filter: blur(50px);\n}\n\n"}]}},"actionData":null,"errors":null}