{"loaderData":{"0":null,"0-3":{"total":7307,"projects":[{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"74020f","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1584,"cssLen":832,"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 #00acee solid;\n overflow: hidden;\n}\n\n.text1 {\n font-size: 17px;\n font-weight: 700;\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: #00acee;\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:22.000Z","isPrivate":0,"projectId":"96426f","snapshot":null,"tags":null,"title":"button by ItsEnigma143","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":286,"cssLen":1372,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Button\n \n

\n","css":".h-\\[40px\\] {\n height: 40px;\n}\n.h-\\[50px\\] {\n height: 50px;\n}\n.w-\\[140px\\] {\n width: 140px;\n}\n.w-\\[150px\\] {\n width: 150px;\n}\n.bg-sky-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(2 132 199 / var(--tw-bg-opacity));\n}\n.font-bold {\n font-weight: 700;\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.outline {\n outline-style: solid;\n}\n.outline-1 {\n outline-width: 1px;\n}\n.outline-offset-2 {\n outline-offset: 2px;\n}\n.outline-sky-600 {\n outline-color: #0284c7;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:scale-\\[1\\.03\\]:hover {\n --tw-scale-x: 1.03;\n --tw-scale-y: 1.03;\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\\:outline-none:hover {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.active\\:scale-\\[0\\.99\\]:active {\n --tw-scale-x: 0.99;\n --tw-scale-y: 0.99;\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"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"5b8ba6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":2093,"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 display: inline-block;\n cursor: pointer;\n outline: none;\n border: 0;\n vertical-align: middle;\n text-decoration: none;\n font-family: inherit;\n font-size: 15px;\n}\n\nbutton.learn-more {\n font-weight: 600;\n color: #2c2f33;\n text-transform: uppercase;\n padding: 1.25em 2em;\n background: #f6f8fa;\n border: 2px solid #ccd6dd;\n border-radius: 0.75em;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more::before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: #e9ebee;\n border-radius: inherit;\n -webkit-box-shadow: 0 0 0 2px #ccd6dd, 0 0.625em 0 0 #ffffff;\n box-shadow: 0 0 0 2px #ccd6dd, 0 0.625em 0 0 #ffffff;\n -webkit-transform: translate3d(0, 0.75em, -1em);\n transform: translate3d(0, 0.75em, -1em);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more:hover {\n background: #dce0e3;\n -webkit-transform: translate(0, 0.25em);\n transform: translate(0, 0.25em);\n}\n\nbutton.learn-more:hover::before {\n -webkit-box-shadow: 0 0 0 2px #ccd6dd, 0 0.5em 0 0 #ffffff;\n box-shadow: 0 0 0 2px #ccd6dd, 0 0.5em 0 0 #ffffff;\n -webkit-transform: translate3d(0, 0.5em, -1em);\n transform: translate3d(0, 0.5em, -1em);\n}\n\nbutton.learn-more:active {\n background: #dce0e3;\n -webkit-transform: translate(0em, 0.75em);\n transform: translate(0em, 0.75em);\n}\n\nbutton.learn-more:active::before {\n -webkit-box-shadow: 0 0 0 2px #ccd6dd, 0 0 #ffffff;\n box-shadow: 0 0 0 2px #ccd6dd, 0 0 #ffffff;\n -webkit-transform: translate3d(0, 0, -1em);\n transform: translate3d(0, 0, -1em);\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"1cd7a3","snapshot":null,"tags":null,"title":"button by csemszepp","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":2163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t

\n\t\t

\n\t

\t\n","css":".container {\n width: 1000px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n}\n\n.container .btn {\n position: relative;\n top: 0;\n left: 0;\n width: 250px;\n height: 50px;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container .btn a {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(255, 255, 255, 0.05);\n box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 30px;\n padding: 10px;\n letter-spacing: 1px;\n text-decoration: none;\n overflow: hidden;\n color: #fff;\n font-weight: 400px;\n z-index: 1;\n transition: 0.5s;\n backdrop-filter: blur(15px);\n}\n\n.container .btn:hover a {\n letter-spacing: 3px;\n}\n\n.container .btn a::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);\n transform: skewX(45deg) translate(0);\n transition: 0.5s;\n filter: blur(0px);\n}\n\n.container .btn:hover a::before {\n transform: skewX(45deg) translate(200px);\n}\n\n.container .btn::before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n bottom: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::before /*lightup button*/ {\n bottom: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n top: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::after /*lightup button*/ {\n top: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn:nth-child(1)::before,\n.container .btn:nth-child(1)::after {\n background: #2db2ff;\n box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,\n\t\t0 0 60px #2db2ff;\n}\n"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"ac835e","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":615,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --color: #560bad;\n font-family: inherit;\n display: inline-block;\n width: 6em;\n height: 2.6em;\n line-height: 2.5em;\n overflow: hidden;\n margin: 20px;\n font-size: 17px;\n z-index: 1;\n color: var(--color);\n border: 2px solid var(--color);\n border-radius: 6px;\n position: relative;\n}\n\nbutton::before {\n position: absolute;\n content: \"\";\n background: var(--color);\n width: 150px;\n height: 200px;\n z-index: -1;\n border-radius: 50%;\n}\n\nbutton:hover {\n color: white;\n}\n\nbutton:before {\n top: 100%;\n left: 100%;\n transition: .3s all;\n}\n\nbutton:hover::before {\n top: -30px;\n left: -30px;\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"21e2d2","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":803,"cssLen":1280,"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 \n \n

","css":".box {\n --clr-shadow__border: #5987a3;\n --clr-text: #F6F4EB;\n --clr-rain: #192333;\n --clr-raindrop: #E9F8F9;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n font-weight: 600;\n font-size: 1.5rem;\n background: transparent;\n padding: calc(var(--size) / 3) var(--size);\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.rain {\n width: 100%;\n height: 100%;\n bottom: 0%;\n gap: 0.6rem;\n z-index: -1;\n opacity: 0;\n transition: 0.5s ease-in-out;\n overflow: hidden;\n position: absolute;\n display: flex;\n background: var(--clr-rain);\n}\n\n.box:hover .rain {\n opacity: 1;\n}\n\n.raindrop {\n height: 1.4rem;\n min-width: 0.1rem;\n box-shadow: 60px 100px var(--clr-raindrop),-40px -90px var(--clr-raindrop);\n background-color: var(--clr-raindrop);\n animation: rain-animation calc(0.05s * var(--i)) linear infinite;\n opacity: .3;\n}\n\n@keyframes rain-animation {\n 0% {\n transform: rotate(20deg) translateY(calc(-100% * var(--i)));\n }\n\n 100% {\n transform: rotate(20deg) translateY(calc(100% * var(--i)));\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"00923f","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":517,"cssLen":934,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 145px;\n height: 45px;\n background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 5px 5px 0px #4dc6d93d;\n background-size: 400% 400%;\n}\n\n.svgContainer {\n width: 45px;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.svgContainer svg {\n width: 16px;\n}\n\n.svgContainer svg path {\n fill: white;\n}\n\n.textContainer {\n width: 100px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n}\n\n.Btn:hover {\n animation: gradient 5s ease infinite;\n}\n/* Button's gradient animation */\n@keyframes gradient {\n 0% {\n background-position: 0 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0 50%;\n }\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"0a585d","snapshot":null,"tags":null,"title":"button by ShrinilDhorda","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":510,"cssLen":758,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 0.8rem 4rem;\n border: none;\n outline: none;\n font-size: 1.3rem;\n border-radius: 0.3rem;\n font-weight: 600;\n background-color: rgba(255, 255, 255, 0.953);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n transition: 0.4s ease-in-out;\n}\n\n.button .text {\n position: absolute;\n left: 1.8rem;\n top: 1.3rem;\n transition: 0.4s ease-in-out;\n color: rgb(50, 50, 50);\n}\n\n.svg {\n transform: translateY(-20px) rotate(30deg);\n opacity: 0;\n width: 2rem;\n transition: 0.4s ease-in-out;\n}\n\n.button:hover {\n background-color: rgb(50, 50, 50);\n}\n\n.button:hover .svg {\n display: inline-block;\n transform: translateY(0px) rotate(0deg);\n opacity: 1;\n}\n\n.button:hover .text {\n opacity: 0;\n}\n\n.button:active {\n scale: 0.97;\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"74a2df","snapshot":null,"tags":null,"title":"button by SmookyDev","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":403,"cssLen":2032,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".relative {\n position: relative\n}\n\n.isolation-auto {\n isolation: auto\n}\n\n.z-10 {\n z-index: 10\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-lime-500 {\n --tw-border-opacity: 1;\n border-color: rgb(132 204 22 / var(--tw-border-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:-right-full::before {\n content: var(--tw-content);\n right: -100%\n}\n\n.before\\:-z-10::before {\n content: var(--tw-content);\n z-index: -10\n}\n\n.before\\:aspect-square::before {\n content: var(--tw-content);\n aspect-ratio: 1 / 1\n}\n\n.before\\:w-full::before {\n content: var(--tw-content);\n width: 100%\n}\n\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.before\\:bg-lime-500::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(132 204 22 / var(--tw-bg-opacity))\n}\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\n.before\\:duration-700::before {\n content: var(--tw-content);\n transition-duration: 700ms\n}\n\n.before\\:hover\\:right-0:hover::before {\n content: var(--tw-content);\n right: 0px\n}\n\n.before\\:hover\\:w-full:hover::before {\n content: var(--tw-content);\n width: 100%\n}\n\n.before\\:hover\\:scale-150:hover::before {\n content: var(--tw-content);\n --tw-scale-x: 1.5;\n --tw-scale-y: 1.5;\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.before\\:hover\\:duration-700:hover::before {\n content: var(--tw-content);\n transition-duration: 700ms\n}"},{"created":"2024-01-22T17:00:21.000Z","isPrivate":0,"projectId":"44141b","snapshot":null,"tags":null,"title":"button by MusKRI","updated":"2024-01-22T17:00:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":74,"cssLen":1151,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 15px 40px;\n background: linear-gradient(to right, #09021c, #0c061d);\n color: white;\n border: 1px solid transparent;\n border-radius: 8px;\n cursor: pointer;\n transition: all 300ms ease-in-out;\n position: relative;\n isolation: isolate;\n overflow: hidden;\n}\n\n.button > span {\n position: absolute;\n z-index: -1;\n background: transparent;\n opacity: 0.5;\n width: 33.333%;\n height: 100%;\n}\n\n.button > :first-child {\n left: 0;\n top: 0;\n}\n\n.button > :last-child {\n right: 0;\n top: 0;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n z-index: -1;\n background: hsl(236, 19%, 25%);\n opacity: 0;\n width: 10%;\n aspect-ratio: 1;\n border-radius: 50%;\n inset: 0;\n margin: auto;\n transition: opacity 1000ms 200ms ease-in-out, transform 200ms ease-in-out;\n}\n\n.button:active::before {\n transform: scale(13);\n opacity: 1;\n transition: all 400ms ease-in-out;\n}\n\n.button:has(:first-child:active)::before {\n margin-left: 0;\n}\n\n.button:has(:last-child:active)::before {\n margin-right: 0;\n}\n\n.button:has(:first-child:active)::before,\n.button:has(:last-child:active)::before {\n transition: all 400ms ease-in-out;\n}"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"3d324b","snapshot":null,"tags":null,"title":"button by EcheverriaJesus","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1073,"cssLen":2473,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Button\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-\\[\\#fb7185\\] {\n --tw-gradient-from: #fb7185 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-\\[\\#e11d48\\] {\n --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #e11d48 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.to-\\[\\#be123c\\] {\n --tw-gradient-to: #be123c 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-\\[\\#be123c\\]:hover {\n --tw-gradient-from: #be123c var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(190 18 60 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.hover\\:to-\\[\\#fb7185\\]:hover {\n --tw-gradient-to: #fb7185 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-red-500:hover {\n --tw-shadow-color: #ef4444;\n --tw-shadow: var(--tw-shadow-colored);\n}\n"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"9d53f6","snapshot":null,"tags":null,"title":"button by Codecite","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":484,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n border: 0 solid;\n cursor: pointer;\n font-family: system-ui;\n font-size: 100%;\n background: linear-gradient(90deg, blue, red);\n border-radius: 999px;\n font-weight: 900;\n padding: 1.8rem 5rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn span {\n background: #1e293b;\n border-radius: 999px;\n color: #fff;\n display: grid;\n inset: 5px;\n place-items: center;\n position: absolute;\n transition: background 0.3s;\n}\n\n.btn:hover span {\n background: none;\n}"}]}},"actionData":null,"errors":null}