{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"66180e","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":685,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: linear-gradient(-45deg, #3f00b5, #9f69fe, #27c8b7, #3f00b5);\n background-size: 800% 400%;\n padding: 1em 2em;\n display: inline-block;\n border: none;\n border-radius: 10px;\n font-size: 17px;\n font-weight: 700;\n color: white;\n transition: all .5s ease-in-out;\n animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;\n}\n\nbutton:hover {\n animation: gradient 3s infinite;\n transform: scale(1.05);\n}\n\nbutton:active {\n animation: gradient 3s infinite;\n transform: scale(0.8);\n}\n\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:45.000Z","isPrivate":0,"projectId":"dbddfe","snapshot":null,"tags":null,"title":"button by Creatlydev","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":654,"cssLen":534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --bg: linear-gradient(180deg,\n hsla(0, 0%, 100%, .1),\n hsla(0, 0%, 100%, 0)),\n hsl(128, 52%, 45%);\n box-shadow: 0 1px 2px #25114f66, 0 0 0 1px hsla(128, 50%, 45%, 0.761);\n background-color: transparent;\n border: none;\n line-height: 1;\n display: flex;\n align-items: center;\n gap: .5rem;\n padding: .25rem .5rem;\n cursor: pointer;\n padding-right: 1rem;\n font-weight: 600;\n color: #fff;\n background: var(--bg);\n white-space: nowrap;\n border-radius: 6px;\n border: 1px solid #fff3;\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"9e1e50","snapshot":null,"tags":null,"title":"button by Gautammsharma","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":569,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".comic-btn {\n display: inline-block;\n padding: 1rem 2rem;\n border-radius: 2rem;\n border: none;\n background-color: #ff7675;\n color: #fff;\n font-size: 1.5rem;\n font-weight: bold;\n text-transform: uppercase;\n text-shadow: 2px 2px #000;\n box-shadow: 6px 6px 0px #d63031;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.comic-btn:hover {\n background-color: #fdcb6e;\n box-shadow: 4px 4px 0px #e17055;\n transform: translate(2px, 2px);\n}\n\n.comic-btn:active {\n background-color: #e17055;\n box-shadow: 0px 0px 0px #d63031;\n transform: translate(6px, 6px);\n}\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"9b5f7f","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1642,"cssLen":3168,"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: 0;\n width: 135px;\n height: 65px;\n background: transparent;\n font-size: 17px;\n border: 1px solid #ffffff1c;\n border-radius: 8px;\n box-shadow: inset 0 0 10px #ffffff1c;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 135px;\n height: 65px;\n background: radial-gradient(circle at 100% -50%, #ffffff69 45%, #d4d4d44f 60%, #ffffff36 2%);\n /* background-size: 200%; */\n background-repeat: no-repeat;\n filter: opacity(.3) blur(.3em);\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n top: 120%;\n left: 0;\n transform: perspective(1.5em) rotateX(35deg) scale(1, .6);\n height: 100%;\n width: 100%;\n background-color: #fbfd7b;\n filter: blur(2em);\n opacity: 0;\n pointer-events: none;\n}\n\nbutton p {\n display: inline-block;\n width: 135px;\n line-height: 65px;\n font-size: 17px;\n font-weight: 900;\n color: #d6d6d6;\n filter: blur(.02em);\n z-index: 5;\n}\n\nbutton .svg-1 {\n position: absolute;\n top: 50%;\n left: 20%;\n transform: translate(0, -50%) rotate(45deg);\n width: 2.5rem;\n height: auto;\n filter: blur(.1rem) opacity(.5);\n z-index: -5;\n}\n\n.fil0 {\n fill: #935E28\n}\n\nbutton:hover {\n filter: blur(.05em);\n animation: lightBox 1s ease-in-out forwards;\n}\n\nbutton:hover::after {\n animation: light 1s ease-in-out forwards;\n}\n\nbutton:hover p {\n animation: lightText 1s ease-in-out forwards;\n}\n\n@keyframes lightBox {\n 0% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 5px 0px #fbfd7b8a, inset 0 0 10px #fbfd7b8a;\n }\n\n 20% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 30% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 10px 0px #fbfd7b8a, inset 0 0 15px #fbfd7b8a;\n }\n\n 38% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 45% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 20px #fbfd7b8a;\n }\n\n 50% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 53% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;\n }\n\n 65% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 100% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;\n }\n}\n\n@keyframes light {\n 0% {\n opacity: .7;\n }\n\n 20% {\n opacity: 0;\n }\n\n 30% {\n opacity: .7;\n }\n\n 38% {\n opacity: 0;\n }\n\n 45% {\n opacity: .7;\n }\n\n 50% {\n opacity: 0;\n }\n\n 53% {\n opacity: .7;\n }\n\n 65% {\n opacity: 0;\n }\n\n 100% {\n opacity: .7;\n }\n}\n\n@keyframes lightText {\n 0% {\n color: #fbfd7b;\n text-shadow: 0 0 5px #fbfd7b8a;\n }\n\n 20% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 30% {\n color: #fbfd7b;\n text-shadow: 0 0 10px #fbfd7b8a;\n }\n\n 38% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 45% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n\n 50% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 53% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n\n 65% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 100% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"60a693","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":879,"cssLen":939,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BG {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #053eff;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n background-color: rgba(214, 214, 214, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"243910","snapshot":null,"tags":null,"title":"button by Creatlydev","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":505,"cssLen":816,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 130px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(15, 15, 15);\n border: none;\n color: white;\n font-weight: 600;\n gap: 8px;\n cursor: pointer;\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n}\n\n.svgIcon {\n width: 16px;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.Btn::before {\n width: calc(100% + 40px);\n aspect-ratio: 1/1;\n position: absolute;\n content: \"\";\n background-color: white;\n border-radius: 50%;\n left: -20px;\n top: 50%;\n transform: translate(-150%, -50%);\n transition-duration: .5s;\n mix-blend-mode: difference;\n}\n\n.Btn:hover::before {\n transform: translate(0, -50%);\n}\n\n.Btn:active {\n transform: translateY(4px);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"33c5e2","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":630,"cssLen":749,"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","css":".cursor-pointer {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-pink-400 {\n stroke: #f472b6;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\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.group:hover .group-hover\\:fill-pink-800 {\n fill: #9d174d;\n}\n.group:active .group-active\\:fill-pink-600 {\n fill: #db2777;\n}\n.group:active .group-active\\:stroke-pink-200 {\n stroke: #fbcfe8;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"aef76c","snapshot":null,"tags":null,"title":"button by mayurd8862","updated":"2024-01-22T17:00:45.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":527,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 0.6em 1.3em;\n font-weight: 900;\n font-size: 18px;\n background-color: rgb(40, 40, 40);\n border-radius: 10px;\n border: 1px solid rgb(232, 97, 124);\n color: aliceblue;\n box-shadow: 0 0 25px rgb(232, 97, 124),\n 0 0 25px rgb(232, 97, 124),\n 0 0 5px rgb(232, 97, 124) inset;\n cursor: pointer;\n}\n\n.button:hover {\n transform: translateY(-2px);\n box-shadow: 0 0 30px rgb(232, 97, 124),\n 0 0 30px rgb(232, 97, 124),\n 0 0 10px rgb(232, 97, 124) inset;\n}\n\n"},{"created":"2024-01-22T17:00:45.000Z","isPrivate":0,"projectId":"ecde16","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:46.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":529,"cssLen":798,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n color: white;\n background-color: #10B981;\n --ring-color: #6EE7B7;\n font-weight: 500;\n border-radius: 0.5rem;\n font-size: 1rem;\n line-height: 2rem;\n padding-left: 2rem;\n padding-right: 2rem;\n padding-top: 0.7rem;\n padding-bottom: 0.7rem;\n text-align: center;\n margin-right: 0.5rem;\n display: inline-flex;\n align-items: center;\n border: none;\n}\n\nbutton:hover {\n background-color: #059669;\n}\n\nbutton:focus {\n box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n}\n\nbutton svg {\n display: inline;\n width: 1.3rem;\n height: 1.3rem;\n margin-right: 0.75rem;\n color: white;\n animation: bounce 1s infinite;\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-5px);\n }\n\n 50% {\n transform: translateY(5px);\n }\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"96d28c","snapshot":null,"tags":null,"title":"button by Madflows","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":564,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n outline: none;\n border: none;\n height: 3.5em;\n padding: 0 2.5rem;\n border-radius: 0.375rem;\n background: #4503dc;\n color: #fff;\n -webkit-box-shadow: 0 0.4rem 0 0 #3700b8;\n box-shadow: 0 0.4rem 0 0 #3700b8;\n letter-spacing: 1px;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n font-family: sans-serif;\n font-weight: 700;\n}\n\n.button:active {\n -webkit-transform: translateY(0.3rem);\n -ms-transform: translateY(0.3rem);\n transform: translateY(0.3rem);\n -webkit-box-shadow: 0 0.2rem 0 0 #3700b8;\n box-shadow: 0 0.2rem 0 0 #3700b8;\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"673238","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":104,"cssLen":1813,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n transform: rotate(-25deg) skew(25deg);\n transform-style: preserve-3d;\n position: relative;\n list-style: none;\n width: 100px;\n height: 32px;\n border: none;\n background: transparent;\n font-family: inherit;\n cursor: pointer;\n}\n\nbutton:before {\n content: '';\n position: absolute;\n bottom: -10px;\n left: -5px;\n width: 100%;\n height: 10px;\n background: #2a2a2a;\n transform: skewX(-41deg);\n}\n\nbutton:after {\n content: '';\n position: absolute;\n top: 5px;\n left: -9px;\n width: 9px;\n height: 100%;\n background: #2a2a2a;\n transform: skewY(-49deg);\n}\n\nbutton span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #2a2a2a;\n color: #fff;\n font-size: 25px;\n transition: 1.1s ease-out;\n}\n\nbutton:hover span {\n z-index: 1000;\n transition: .3s;\n color: yellow;\n}\n\nbutton:hover span:nth-child(5) {\n transform: translate(40px, -40px);\n opacity: 1;\n}\n\nbutton:hover span:nth-child(4) {\n transform: translate(30px, -30px);\n opacity: .8;\n background-color: yellow;\n}\n\nbutton:hover span:nth-child(3) {\n transform: translate(20px, -20px);\n opacity: .6;\n background-color: yellow;\n}\n\nbutton:hover span:nth-child(2) {\n transform: translate(10px, -10px);\n opacity: .4;\n background-color: yellow;\n}\n\nbutton:hover span:nth-child(1) {\n transform: translate(0px, 0px);\n opacity: .2;\n background-color: yellow;\n}\n\nbutton:active span:nth-child(5) {\n transform: translate(20px, -20px);\n opacity: 1;\n}\n\nbutton:active span:nth-child(4) {\n transform: translate(15px, -15px);\n}\n\nbutton:active span:nth-child(3) {\n transform: translate(10px, -10px);\n}\n\nbutton:active span:nth-child(2) {\n transform: translate(5px, -5px);\n}\n\nbutton:active span:nth-child(1) {\n transform: translate(0px, 0px);\n}\n\nbutton:nth-child(1):hover span {\n background: #52E19F;\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"a1f1f2","snapshot":null,"tags":null,"title":"button by louloudev59","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":310,"cssLen":2478,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".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))}.rounded-full{border-radius:9999px}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-purple-400{--tw-gradient-from:#c084fc var(--tw-gradient-from-position);--tw-gradient-to:rgb(192 132 252 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.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))}@keyframes pulse{50%{opacity:.5}}.hover\\:animate-pulse:hover{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.hover\\:from-pink-500:hover{--tw-gradient-from:#ec4899 var(--tw-gradient-from-position);--tw-gradient-to:rgb(236 72 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.hover\\:to-purple-600:hover{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);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)}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.active\\:animate-bounce:active{animation:bounce 1s infinite}"}]}},"actionData":null,"errors":null}