{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"018f85","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":1736,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".download {\n background: none;\n border: 0;\n box-sizing: border-box;\n margin: 1em;\n padding: 1em 2em;\n color: #039be5;\n background-color: #fff;\n font-size: inherit;\n font-weight: 700;\n position: relative;\n vertical-align: middle;\n border-radius: 4px;\n box-shadow: 0px 20px 30px -15px rgba(0, 0, 0, 0.226);\n cursor: pointer;\n}\n\n.download::before, .download::after {\n box-sizing: inherit;\n border-radius: inherit;\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.download {\n transition: color 0.25s;\n}\n\n.download::before, .download::after {\n border: 2px solid transparent;\n width: 0;\n height: 0;\n}\n\n.download::before {\n top: 0;\n left: 0;\n}\n\n.download::after {\n bottom: 0;\n right: 0;\n}\n\n.download:focus {\n color: #039be5;\n}\n\n.download:focus::before, .download:focus::after {\n width: 100%;\n height: 100%;\n}\n\n.download:focus::before {\n border-top-color: #039be5;\n border-right-color: #039be5;\n transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;\n}\n\n.download:focus::after {\n border-bottom-color: #039be5;\n border-left-color: #039be5;\n transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;\n}\n\n.download .tooltip {\n visibility: hidden;\n width: 120px;\n background-color: #039be5;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 5px 0;\n position: absolute;\n z-index: 1;\n bottom: 120%;\n left: 50%;\n margin-left: -60px;\n}\n\n.download .tooltip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #039be5 transparent transparent transparent;\n}\n\n.download:hover:not(:focus) .tooltip {\n visibility: visible;\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"2b4df5","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":53,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n align-items: center;\n background: #fff;\n border: 0;\n border-radius: 8px;\n box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;\n box-sizing: border-box;\n color: #000;\n display: flex;\n font-family: Phantomsans, sans-serif;\n font-size: 18px;\n justify-content: center;\n line-height: 1em;\n max-width: 100%;\n min-width: 140px;\n padding: 3px;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n white-space: nowrap;\n cursor: pointer;\n transition: all .3s;\n padding-top: 20px;\n padding-bottom: 20px\n}\n\nbutton:hover {\n scale: 0.95\n}\n\nbutton:active {\n scale: 0.9\n}\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"753cdf","snapshot":null,"tags":null,"title":"button by Satwinder04","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":402,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".game-button {\n background-color: #c43f3f;\n color: #fff;\n font-size: 20px;\n font-weight: bold;\n border: none;\n border-radius: 8px;\n padding: 12px 24px;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 0px 4px 0px #a13333;\n transition: all 0.2s ease-in-out;\n}\n\n.game-button:hover {\n background-color: #a13333;\n box-shadow: 0px 2px 0px #751c1c;\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"3071db","snapshot":null,"tags":null,"title":"button by Peary74","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3045,"cssLen":3064,"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","css":"button {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n background: #fd1853;\n font-family: \"Montserrat\", sans-serif;\n overflow: hidden;\n border: none;\n}\n\nbutton:after {\n content: \" \";\n width: 0%;\n height: 100%;\n background: #fff;\n position: absolute;\n transition: all 0.4s ease-in-out;\n right: 0;\n}\n\nbutton:hover::after {\n right: auto;\n left: 0;\n width: 100%;\n}\n\nbutton span {\n text-align: center;\n text-decoration: none;\n width: 100%;\n padding: 18px 25px;\n color: #fffcfd;\n font-size: 1.125em;\n font-weight: 700;\n letter-spacing: 0.3em;\n z-index: 20;\n transition: all 0.3s ease-in-out;\n}\n\nbutton:hover span {\n animation: scaleUp 0.3s ease-in-out;\n color: #fd1853;\n}\n\nbutton:hover {\n animation: scaleUp 0.3s ease-in-out;\n}\n\n@keyframes scaleUp {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.95);\n }\n\n 100% {\n transform: scale(1);\n }\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 #fd1853);\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 #fd1853);\n z-index: -5;\n transition: all 1s cubic-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 #fd1853);\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 #fd1853);\n z-index: -5;\n transition: all .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 #fd1853);\n z-index: -5;\n transition: all .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 #fd1853);\n z-index: -5;\n transition: all .8s ease;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -2%;\n left: 0%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: 34%;\n left: 41.5%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\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 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: 0%;\n left: 55%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 25%;\n left: 85%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 75%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"c97587","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":544,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n Scroll Down\n

","css":".mouse-btn {\n margin: 10px auto;\n width: 40px;\n height: 80px;\n border: 3px solid rgba(122, 122, 124, 0.918);\n border-radius: 20px;\n display: flex;\n}\n\n.mouse-scroll {\n display: block;\n width: 20px;\n height: 20px;\n background: linear-gradient(170deg, rgba(122, 122, 124, 0.918), rgb(123, 124, 124));\n border-radius: 50%;\n margin: auto;\n animation: scrolling13 1s linear infinite;\n}\n\n@keyframes scrolling13 {\n 0% {\n opacity: 0;\n transform: translateY(-20px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(20px);\n }\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"429ca9","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":932,"cssLen":2376,"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 \n Explore!\n\n","css":".absolute{position:absolute}.relative{position:relative}.-left-2{left:-0.5rem}.-top-8{top:-2rem}.left-6{left:1.5rem}.top-2{top:0.5rem}.top-2\\.5{top:0.625rem}.z-10{z-index:10}.h-12{height:3rem}.h-32{height:8rem}.w-32{width:8rem}.w-36{width:9rem}.origin-left{transform-origin:left}.rotate-12{--tw-rotate:12deg;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))}.scale-x-0{--tw-scale-x:0;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))}.transform{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))}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.border-none{border-style:none}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-purple-400{--tw-bg-opacity:1;background-color:rgb(192 132 252 / var(--tw-bg-opacity))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-0{opacity:0}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-100{transition-duration:100ms}.duration-1000{transition-duration:1000ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.group:hover .group-hover\\:scale-x-100{--tw-scale-x:1;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))}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:duration-1000{transition-duration:1000ms}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .group-hover\\:duration-700{transition-duration:700ms}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"f0116c","snapshot":null,"tags":null,"title":"button by Remelens","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":662,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: inline-block;\n text-align: center;\n border: 0.9px solid #aaa;\n border-radius: 2.5px;\n background: #fff;\n cursor: pointer;\n color: #000;\n min-width: 80px;\n padding: 4px 0;\n margin: 0 5px;\n line-height: 20px;\n transition: all 0.2s;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n font-family: Menlo, Monaco, Consolas, \"Lucida Console\", \"Ubuntu Mono\",\n \"Microsoft YaHei UI\", \"PingFang SC\", \"Noto Sans CJK SC\", \"SimHei\";\n}\n.button:hover {\n border-color: #0078d4;\n background: #e0eef9;\n transition: all 0.2s;\n}\n.button:active {\n border-color: #005499;\n background: #cce4f7;\n transition: all 0.2s;\n}\n"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"1d5cd5","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1043,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n border-radius: 8px;\n height: 40px;\n border: none;\n background: #ff5722;\n /* Change the background color to orange */\n color: white;\n padding: 15px;\n box-shadow: 0 0.7065919983928324px 0.7065919983928324px -0.625px #00000026,\n 0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025,\n 0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023,\n 0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020,\n 0 13.646761411524492px 13.646761411524492px -3.125px #0000001b,\n 0 30px 30px -3.75px #0000000d;\n font-weight: bold;\n font-family: Montserrat;\n cursor: pointer;\n display: flex;\n align-items: center;\n transition: 150ms ease-in-out;\n}\n\n.button:active {\n scale: 0.95;\n background: #f44336;\n /* Change the active background color to red */\n color: black;\n box-shadow: rgba(0, 0, 0, 0.26) 0px 0.637473px 1.14745px -1.125px,\n rgba(0, 0, 0, 0.24) 0px 1.93094px 3.4757px -2.25px,\n rgba(0, 0, 0, 0.192) 0px 5.10423px 9.18761px -3.375px,\n rgba(0, 0, 0, 0.03) 0px 16px 28.8px -4.5px;\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"910a92","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":901,"cssLen":4922,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".relative {\n position: relative\n}\n\n.h-16 {\n height: 4rem\n}\n\n.w-64 {\n width: 16rem\n}\n\n.origin-left {\n transform-origin: left\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.border {\n border-width: 1px\n}\n\n.bg-sky-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(7 89 133 / var(--tw-bg-opacity))\n}\n\n.p-3 {\n padding: 0.75rem\n}\n\n.text-left {\n text-align: left\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.underline {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline\n}\n\n.underline-offset-2 {\n text-underline-offset: 2px\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:right-1::before {\n content: var(--tw-content);\n right: 0.25rem\n}\n\n.before\\:top-1::before {\n content: var(--tw-content);\n top: 0.25rem\n}\n\n.before\\:z-10::before {\n content: var(--tw-content);\n z-index: 10\n}\n\n.before\\:h-12::before {\n content: var(--tw-content);\n height: 3rem\n}\n\n.before\\:w-12::before {\n content: var(--tw-content);\n width: 3rem\n}\n\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.before\\:bg-sky-400::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(56 189 248 / var(--tw-bg-opacity))\n}\n\n.before\\:blur-lg::before {\n content: var(--tw-content);\n --tw-blur: blur(16px);\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.before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:right-8::after {\n content: var(--tw-content);\n right: 2rem\n}\n\n.after\\:top-3::after {\n content: var(--tw-content);\n top: 0.75rem\n}\n\n.after\\:z-10::after {\n content: var(--tw-content);\n z-index: 10\n}\n\n.after\\:h-20::after {\n content: var(--tw-content);\n height: 5rem\n}\n\n.after\\:w-20::after {\n content: var(--tw-content);\n width: 5rem\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-cyan-600::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(8 145 178 / var(--tw-bg-opacity))\n}\n\n.after\\:blur::after {\n content: var(--tw-content);\n --tw-blur: blur(8px);\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.after\\:duration-500::after {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.hover\\:border-sky-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(125 211 252 / var(--tw-border-opacity))\n}\n\n.hover\\:bg-sky-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(125 211 252 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-sky-900:hover {\n --tw-text-opacity: 1;\n color: rgb(12 74 110 / var(--tw-text-opacity))\n}\n\n.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline\n}\n\n.hover\\:decoration-2:hover {\n text-decoration-thickness: 2px\n}\n\n.hover\\:underline-offset-4:hover {\n text-underline-offset: 4px\n}\n\n.hover\\:duration-500:hover {\n transition-duration: 500ms\n}\n\n.hover\\:before\\:-bottom-8:hover::before {\n content: var(--tw-content);\n bottom: -2rem\n}\n\n.hover\\:before\\:right-16:hover::before {\n content: var(--tw-content);\n right: 4rem\n}\n\n.hover\\:before\\:top-8:hover::before {\n content: var(--tw-content);\n top: 2rem\n}\n\n.hover\\:before\\:blur-none:hover::before {\n content: var(--tw-content);\n --tw-blur: blur(0);\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.hover\\:after\\:-right-2:hover::after {\n content: var(--tw-content);\n right: -0.5rem\n}\n\n.hover\\:after\\:scale-150:hover::after {\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.hover\\:after\\:blur-none:hover::after {\n content: var(--tw-content);\n --tw-blur: blur(0);\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.group:hover .group-hover\\:before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.group:hover .group-hover\\:after\\:duration-1000::after {\n content: var(--tw-content);\n transition-duration: 1000ms\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"6d8e59","snapshot":null,"tags":null,"title":"button by laminelawal","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":714,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border-radius: 30px;\n border: none;\n cursor: pointer;\n outline: none;\n width: 150px;\n height: 54px;\n background-image: linear-gradient(to top, #222 0%, #333 80%, #444 100%);\n color: white;\n font-size: 20px;\n font-weight: 400;\n font-family: monospace;\n transition: all 0.3s;\n text-shadow: 0 4px 3px black;\n}\n\nbutton:hover {\n box-shadow: 0 4px 3px 1px #333, 0 6px 8px #222, 0 -4px 4px #222, 0 -6px 4px #333, inset 0 0 3px 3px black;\n}\n\nbutton:active {\n box-shadow: 0 4px 3px 1px #333, 0 6px 8px #222, 0 -4px 4px #222, 0 -6px 4px #333, inset 0 0 3px 3px black;\n}\n\nbutton:focus {\n box-shadow: 0 4px 3px 1px #333, 0 6px 8px #222, 0 -4px 4px #222, 0 -6px 4px #333, inset 0 5px 7px 0 black;\n}\n"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"d699cd","snapshot":null,"tags":null,"title":"button by SmookyDev","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":1884,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"UIVERSE\n","css":"a {\n position: relative;\n width: 160px;\n height: 50px;\n line-height: 48px;\n background: #000;\n text-transform: uppercase;\n font-weight: bolder;\n font-size: 25px;\n text-align: center;\n letter-spacing: 0.1em;\n text-decoration: none;\n transition: 0.5s;\n -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);\n}\n\na span {\n position: absolute;\n display: block;\n top: 1px;\n left: 1px;\n right: 1px;\n bottom: 1px;\n text-align: center;\n background: #0c0c0c;\n color: rgba(255, 255, 255, 0.2);\n transition: 0.5s;\n}\n\na:hover span {\n color: rgba(255, 255, 255, 1);\n}\n\na span::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 50%;\n background: rgba(255, 255, 255, 0.1);\n z-index: 10;\n}\n\na::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 45deg,\n #c0392b,\n #f39c12,\n #f1c40f,\n #2ecc71,\n #3498db,\n #2980b9,\n #9b59b6,\n #8e44ad,\n #c0392b,\n #f39c12,\n #f1c40f,\n #2ecc71,\n #3498db,\n #2980b9,\n #9b59b6,\n #8e44ad\n );\n background-size: 400%;\n opacity: 0;\n transition: 2.5 s;\n animation: eff 20s linear infinite;\n}\n\na:hover::before,\na:hover::after {\n opacity: 1;\n}\n\na::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 45deg,\n #c0392b,\n #f39c12,\n #f1c40f,\n #2ecc71,\n #3498db,\n #2980b9,\n #9b59b6,\n #8e44ad,\n #c0392b,\n #f39c12,\n #f1c40f,\n #2ecc71,\n #3498db,\n #2980b9,\n #9b59b6,\n #8e44ad\n );\n background-size: 400%;\n opacity: 0;\n filter: blur(20px);\n transition: 0.5s;\n animation: eff 20s ease infinite;\n}\n\n@keyframes eff {\n 0% {\n background-position: 0 0;\n }\n 50% {\n background-position: 400% 0;\n }\n 100% {\n background-position: 0 0;\n }\n}\n"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"064e8c","snapshot":null,"tags":null,"title":"button by SmookyDev","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":393,"cssLen":2038,"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.isolation-auto {\n isolation: auto;\n}\n.z-10 {\n z-index: 10;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-lime-500 {\n --tw-border-opacity: 1;\n border-color: rgb(132 204 22 / var(--tw-border-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute;\n}\n.before\\:-left-full::before {\n content: var(--tw-content);\n left: -100%;\n}\n.before\\:-z-10::before {\n content: var(--tw-content);\n z-index: -10;\n}\n.before\\:aspect-square::before {\n content: var(--tw-content);\n aspect-ratio: 1 / 1;\n}\n.before\\:w-full::before {\n content: var(--tw-content);\n width: 100%;\n}\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px;\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.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-700::before {\n content: var(--tw-content);\n transition-duration: 700ms;\n}\n.before\\:hover\\:left-0:hover::before {\n content: var(--tw-content);\n left: 0px;\n}\n.before\\:hover\\:w-full:hover::before {\n content: var(--tw-content);\n width: 100%;\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))\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.before\\:hover\\:duration-700:hover::before {\n content: var(--tw-content);\n transition-duration: 700ms;\n}\n"}]}},"actionData":null,"errors":null}