{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"22c575","snapshot":"https://s1.qingting.work/runjs/dc9d32831d8b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by doniaskima","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":223,"cssLen":1935,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-53,\n.btn-53 *,\n.btn-53 :after,\n.btn-53 :before,\n.btn-53:after,\n.btn-53:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-53 {\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 line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n}\n\n.btn-53:disabled {\n cursor: default;\n}\n\n.btn-53:-moz-focusring {\n outline: auto;\n}\n\n.btn-53 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-53 [hidden] {\n display: none;\n}\n\n.btn-53 {\n border: 1px solid;\n border-radius: 999px;\n box-sizing: border-box;\n display: block;\n font-weight: 900;\n overflow: hidden;\n padding: 1.2rem 3rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-53 .original {\n background: #fff;\n color: #000;\n display: grid;\n inset: 0;\n place-content: center;\n position: absolute;\n transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);\n}\n\n.btn-53:hover .original {\n transform: translateY(100%);\n}\n\n.btn-53 .letters {\n display: inline-flex;\n}\n\n.btn-53 span {\n opacity: 0;\n transform: translateY(-15px);\n transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.2s;\n}\n\n.btn-53 span:nth-child(2n) {\n transform: translateY(15px);\n}\n\n.btn-53:hover span {\n opacity: 1;\n transform: translateY(0);\n}\n\n.btn-53:hover span:nth-child(2) {\n transition-delay: 0.1s;\n}\n\n.btn-53:hover span:nth-child(3) {\n transition-delay: 0.2s;\n}\n\n.btn-53:hover span:nth-child(4) {\n transition-delay: 0.3s;\n}\n\n.btn-53:hover span:nth-child(5) {\n transition-delay: 0.4s;\n}\n\n.btn-53:hover span:nth-child(6) {\n transition-delay: 0.5s;\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"6328fc","snapshot":"https://s1.qingting.work/runjs/3c53f305b8b4.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1707,"cssLen":836,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":"button {\n background: transparent;\n position: relative;\n padding: 5px 15px;\n display: flex;\n align-items: center;\n font-size: 17px;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n border: 1px solid rgb(255,0,0);\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: rgb(255,0,0);\n transition: color 0.3s 0.1s ease-out;\n text-align: center;\n}\n\nbutton span {\n margin: 10px;\n}\n\nbutton::before {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n content: '';\n border-radius: 50%;\n display: block;\n width: 20em;\n height: 20em;\n left: -5em;\n text-align: center;\n transition: box-shadow 0.5s ease-out;\n z-index: -1;\n}\n\nbutton:hover {\n color: #fff;\n border: 1px solid rgb(255,0,0);\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em rgb(255, 0, 0);\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"732ed2","snapshot":"https://s1.qingting.work/runjs/8ceb2c1cec99.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by mobinkakei","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":890,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n --color1: #1a8516;\n --color2: #236b19;\n perspective: 1000px;\n padding: 1em 1em;\n background: linear-gradient(var(--color1), var(--color2));\n border: none;\n outline: none;\n font-size: 20px;\n text-transform: uppercase;\n letter-spacing: 4px;\n color: #fff;\n text-shadow: 0 10px 10px #000;\n cursor: pointer;\n transform: rotateX(70deg) rotateZ(30deg);\n transform-style: preserve-3d;\n transition: transform 0.5s;\n}\n\n.btn::before {\n content: \"\";\n width: 100%;\n height: 15px;\n background-color: var(--color2);\n position: absolute;\n bottom: 0;\n right: 0;\n transform: rotateX(90deg);\n transform-origin: bottom;\n}\n\n.btn::after {\n content: \"\";\n width: 15px;\n height: 100%;\n background-color: var(--color1);\n position: absolute;\n top: 0;\n right: 0;\n transform: rotateY(-90deg);\n transform-origin: right;\n}\n\n.btn:hover {\n transform: rotateX(30deg) rotateZ(0);\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"bfcc6e","snapshot":"https://s1.qingting.work/runjs/7627775ca947.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":138,"cssLen":951,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".setting-btn {\n width: 45px;\n height: 45px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n background-color: rgb(129, 110, 216);\n border-radius: 10px;\n cursor: pointer;\n border: none;\n box-shadow: 0px 0px 0px 2px rgb(212, 209, 255);\n}\n.bar {\n width: 50%;\n height: 2px;\n background-color: rgb(229, 229, 229);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 2px;\n}\n.bar::before {\n content: \"\";\n width: 2px;\n height: 2px;\n background-color: rgb(126, 117, 255);\n position: absolute;\n border-radius: 50%;\n border: 2px solid white;\n transition: all 0.3s;\n box-shadow: 0px 0px 5px white;\n}\n.bar1::before {\n transform: translateX(-4px);\n}\n.bar2::before {\n transform: translateX(4px);\n}\n.setting-btn:hover .bar1::before {\n transform: translateX(4px);\n}\n.setting-btn:hover .bar2::before {\n transform: translateX(-4px);\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"dff7f8","snapshot":"https://s1.qingting.work/runjs/07e843527170.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Botwe-Felix5820","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":1052,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n height: 2.8em;\n width: 9em;\n background: transparent;\n -webkit-animation: jello-horizontal 0.9s both;\n animation: jello-horizontal 0.9s both;\n border: 2px solid #016dd9;\n outline: none;\n color: #016dd9;\n cursor: pointer;\n font-size: 17px;\n}\n\nbutton:hover {\n background: #016dd9;\n color: #ffffff;\n animation: squeeze3124 0.9s both;\n}\n\n@keyframes squeeze3124 {\n 0% {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n -webkit-transform: scale3d(1.25, 0.75, 1);\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.75, 1.25, 1);\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.15, 0.85, 1);\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n -webkit-transform: scale3d(0.95, 1.05, 1);\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n -webkit-transform: scale3d(1.05, 0.95, 1);\n transform: scale3d(1.05, 0.95, 1);\n }\n\n 100% {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"22ad0e","snapshot":"https://s1.qingting.work/runjs/98006f178e8e.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by ErzenXz","updated":"2024-01-22T18:59:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":442,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: fit-content;\n min-width: 100px;\n height: 45px;\n padding: 8px;\n border-radius: 5px;\n border: 2.5px solid #E0E1E4;\n box-shadow: 0px 0px 20px -20px;\n cursor: pointer;\n background-color: white;\n transition: all 0.2s ease-in-out 0ms;\n user-select: none;\n font-family: 'Poppins', sans-serif;\n}\n\nbutton:hover {\n background-color: #F2F2F2;\n box-shadow: 0px 0px 20px -18px;\n}\n\nbutton:active {\n transform: scale(0.95);\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"e04881","snapshot":"https://s1.qingting.work/runjs/38c313f36b8b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by adamgiebl","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":620,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n font-size: 16px;\n padding: 1em 3.3em;\n cursor: pointer;\n transform: perspective(200px) rotateX(15deg);\n color: white;\n font-weight: 900;\n border: none;\n border-radius: 5px;\n background: linear-gradient(\n 0deg,\n rgba(63, 94, 251, 1) 0%,\n rgba(70, 135, 252, 1) 100%\n );\n box-shadow: rgba(63, 94, 251, 0.2) 0px 40px 29px 0px;\n will-change: transform;\n transition: all 0.3s;\n border-bottom: 2px solid rgba(70, 135, 252, 1);\n}\n\nbutton:hover {\n transform: perspective(180px) rotateX(30deg) translateY(2px);\n}\n\nbutton:active {\n transform: perspective(170px) rotateX(36deg) translateY(5px);\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"cc1a38","snapshot":"https://s1.qingting.work/runjs/8f258a124599.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by bandirevanth","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":811,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".custom-btn {\n width: 130px;\n height: 40px;\n color: #fff;\n border-radius: 5px;\n padding: 10px 25px;\n font-family: 'Lato', sans-serif;\n font-weight: 500;\n background: transparent;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n display: inline-block;\n box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),\n 7px 7px 20px 0px rgba(0,0,0,.1),\n 4px 4px 5px 0px rgba(0,0,0,.1);\n outline: none;\n}\n\n.btn-1 {\n background: rgb(96,9,240);\n background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);\n border: none;\n}\n\n.btn-1:before {\n height: 0%;\n width: 2px;\n}\n\n.btn-1:hover {\n box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),\n -4px -4px 6px 0 rgba(116, 125, 136, .5), \n inset -4px -4px 6px 0 rgba(255,255,255,.2),\n inset 4px 4px 6px 0 rgba(0, 0, 0, .4);\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"572ee5","snapshot":"https://s1.qingting.work/runjs/55ef8cac39e0.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by milegelu","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":443,"cssLen":1359,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".button {\n --bezier: cubic-bezier(0.22, 0.61, 0.36, 1);\n --edge-light: hsla(0, 0%, 50%, 0.8);\n --text-light: rgba(255, 255, 255, 0.4);\n --back-color: 240, 40%;\n\n cursor: pointer;\n padding: 0.7em 1em;\n border-radius: 0.5em;\n min-height: 2.4em;\n min-width: 3em;\n display: flex;\n align-items: center;\n gap: 0.5em;\n\n font-size: 18px;\n letter-spacing: 0.05em;\n line-height: 1;\n font-weight: bold;\n\n background: linear-gradient(\n 140deg,\n hsla(var(--back-color), 50%, 1) min(2em, 20%),\n hsla(var(--back-color), 50%, 0.6) min(8em, 100%)\n );\n color: hsla(0, 0%, 90%);\n border: 0;\n box-shadow: inset 0.4px 1px 4px var(--edge-light);\n\n transition: all 0.1s var(--bezier);\n}\n\n.button:hover {\n --edge-light: hsla(0, 0%, 50%, 1);\n text-shadow: 0px 0px 10px var(--text-light);\n box-shadow: inset 0.4px 1px 4px var(--edge-light),\n 2px 4px 8px hsla(0, 0%, 0%, 0.295);\n transform: scale(1.1);\n}\n\n.button:active {\n --text-light: rgba(255, 255, 255, 1);\n\n background: linear-gradient(\n 140deg,\n hsla(var(--back-color), 50%, 1) min(2em, 20%),\n hsla(var(--back-color), 50%, 0.6) min(8em, 100%)\n );\n box-shadow: inset 0.4px 1px 8px var(--edge-light),\n 0px 0px 8px hsla(var(--back-color), 50%, 0.6);\n text-shadow: 0px 0px 20px var(--text-light);\n color: hsla(0, 0%, 100%, 1);\n letter-spacing: 0.1em;\n transform: scale(1);\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"b8c0c4","snapshot":"https://s1.qingting.work/runjs/a0ae422f4639.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Yashwanthnaini","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":556,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: none;\n border-radius: 20px;\n background: linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);\n transition: all 1.5s ease;\n font-family: 'Ropa Sans', sans-serif;\n font-weight: bold;\n letter-spacing: 0.05rem;\n padding: 0;\n}\n\nbutton span {\n display: inline-block;\n padding: 15px 35px;\n font-size: 17px;\n border-radius: 20px;\n background: #ffffff10;\n backdrop-filter: blur(20px);\n transition: 0.4s ease-in-out;\n transition-property: color;\n height: 100%;\n width: 100%;\n}\n\nbutton span:hover {\n backdrop-filter: blur(0px);\n color: #ffffff;\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"9c0053","snapshot":"https://s1.qingting.work/runjs/775fb3a564a0.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T18:59:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":704,"cssLen":856,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: transparent;\n position: relative;\n padding: 5px 15px;\n display: flex;\n align-items: center;\n font-size: 17px;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n border: 1px solid rgb(40, 144, 241);\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: rgb(40, 144, 241);\n transition: color 0.3s 0.1s ease-out;\n text-align: center;\n}\n\nbutton span {\n margin: 10px;\n}\n\nbutton::before {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n content: '';\n border-radius: 50%;\n display: block;\n width: 20em;\n height: 20em;\n left: -5em;\n text-align: center;\n transition: box-shadow 0.5s ease-out;\n z-index: -1;\n}\n\nbutton:hover {\n color: #fff;\n border: 1px solid rgb(40, 144, 241);\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em rgb(40, 144, 241);\n}\n "},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"2dcef9","snapshot":"https://s1.qingting.work/runjs/007b49cdae7d.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by btongheng","updated":"2024-01-22T18:59:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":625,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --😀: #644dff;\n --😀😀: #4836bb;\n --😀😀😀: #654dff63;\n cursor: pointer;\n width: 184px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-size: 1.125em;\n font-weight: 800;\n letter-spacing: 2px;\n color: #fff;\n background: var(--😀);\n border: 2px solid var(--😀😀);\n border-radius: .75rem;\n box-shadow: 0 8px 0 var(--😀😀);\n transform: skew(-10deg);\n transition: all .1s ease;\n filter: drop-shadow(0 15px 20px var(--😀😀😀));\n}\n\n.button:active {\n letter-spacing: 0px;\n transform: skew(-10deg) translateY(8px);\n box-shadow: 0 0 0 var(--😀😀😀);\n}"}]}},"actionData":null,"errors":null}