{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-20T03:58:19.000Z","isPrivate":0,"projectId":"df467d","snapshot":"https://s1.qingting.work/runjs/7bdb7e30284c.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by doniaskima","updated":"2024-01-20T08:20:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1927,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-23,\n.btn-23 *,\n.btn-23 :after,\n.btn-23 :before,\n.btn-23:after,\n.btn-23:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-23 {\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 text-transform: uppercase;\n}\n\n.btn-23:disabled {\n cursor: default;\n}\n\n.btn-23:-moz-focusring {\n outline: auto;\n}\n\n.btn-23 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-23 [hidden] {\n display: none;\n}\n\n.btn-23 {\n border-radius: 99rem;\n border-width: 2px;\n overflow: hidden;\n padding: 0.8rem 3rem;\n position: relative;\n}\n\n.btn-23 span {\n display: grid;\n inset: 0;\n place-items: center;\n position: absolute;\n transition: opacity 0.2s ease;\n}\n\n.btn-23 .marquee {\n --spacing: 5em;\n --start: 0em;\n --end: 5em;\n -webkit-animation: marquee 1s linear infinite;\n animation: marquee 1s linear infinite;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n opacity: 0;\n position: relative;\n text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0,\n #fff calc(var(--spacing) * -2) 0;\n}\n\n.btn-23:hover .marquee {\n -webkit-animation-play-state: running;\n animation-play-state: running;\n opacity: 1;\n}\n\n.btn-23:hover .text {\n opacity: 0;\n}\n\n@-webkit-keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n to {\n transform: translateX(var(--end));\n }\n}\n\n@keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n to {\n transform: translateX(var(--end));\n }\n}\n"},{"created":"2024-01-20T03:56:25.000Z","isPrivate":0,"projectId":"ac00ff","snapshot":"https://s1.qingting.work/runjs/7ed87685f7de.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by alexmaracinaru","updated":"2024-01-20T08:20:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":711,"cssLen":507,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n cursor: pointer;\n font-weight: 700;\n font-family: Helvetica,\"sans-serif\";\n transition: all .2s;\n padding: 10px 20px;\n border-radius: 100px;\n background: #cfef00;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n font-size: 15px;\n}\n\nbutton:hover {\n background: #c4e201;\n}\n\nbutton > svg {\n width: 34px;\n margin-left: 10px;\n transition: transform .3s ease-in-out;\n}\n\nbutton:hover svg {\n transform: translateX(5px);\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\n"},{"created":"2024-01-20T03:46:03.000Z","isPrivate":0,"projectId":"686825","snapshot":"https://s1.qingting.work/runjs/5ee902d8bd98.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by Yaya12085","updated":"2024-01-20T05:46:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":188,"cssLen":695,"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 display: flex;\n padding: 1.2em 1rem;\n cursor: pointer;\n gap: 0.4rem;\n font-weight: bold;\n border-radius: 30px;\n text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);\n background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;\n background-size: 300%;\n color: #fff;\n border: none;\n background-position: left center;\n box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);\n transition: background .3s ease;\n}\n\n.button:hover {\n background-size: 320%;\n background-position: right center;\n}\n\n.button:hover svg {\n fill: #fff;\n}\n\n.button svg {\n width: 23px;\n fill: #f09f33;\n transition: .3s ease;\n}"},{"created":"2024-01-20T03:42:35.000Z","isPrivate":0,"projectId":"971342","snapshot":"https://s1.qingting.work/runjs/aa391a87b442.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by cssbuttons-io","updated":"2024-01-20T05:44:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":1073,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n appearance: button;\n background-color: #1899D6;\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 13px 19px;\n text-align: center;\n text-transform: uppercase;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n}\n\nbutton:after {\n background-clip: padding-box;\n background-color: #1CB0F6;\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: \"\";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\nbutton:main, button:focus {\n user-select: auto;\n}\n\nbutton:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\nbutton:disabled {\n cursor: auto;\n}\n\nbutton:active:after {\n border-width: 0 0 0px;\n}\n\nbutton:active {\n padding-bottom: 10px;\n}"},{"created":"2024-01-20T03:41:08.000Z","isPrivate":0,"projectId":"3dc4a4","snapshot":"https://s1.qingting.work/runjs/d60f04450316.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by MuhammadHasann","updated":"2024-01-20T05:41:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":16897,"cssLen":2062,"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 padding: 15px 45px;\n background: #fec195;\n font-size: 17px;\n font-weight: 500;\n color: #181818;\n cursor: pointer;\n border: 1px solid #fec195;\n border-radius: 8px;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));\n}\n\nbutton:hover {\n border: 1px solid #f3b182;\n background: linear-gradient(\n 85deg,\n #fec195,\n #fcc196,\n #fabd92,\n #fac097,\n #fac39c\n );\n animation: wind 2s ease-in-out infinite;\n}\n\n@keyframes wind {\n 0% {\n background-position: 0% 50%;\n }\n\n 0% {\n background-position: 50% 100%;\n }\n\n 0% {\n background-position: 0% 50%;\n }\n}\n\n.icon-1 {\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n transform-origin: 0 0;\n transform: rotate(10deg);\n transition: all 0.5s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));\n}\n\nbutton:hover .icon-1 {\n animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;\n transform: rotate(10deg);\n}\n\n@keyframes slay-1 {\n 0% {\n transform: rotate(10deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(10deg);\n }\n}\n\n.icon-2 {\n position: absolute;\n top: 0;\n left: 25px;\n width: 12px;\n transform-origin: 50% 0;\n transform: rotate(10deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-2 {\n animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-2 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n\n.icon-3 {\n position: absolute;\n top: 0;\n left: 0;\n width: 18px;\n transform-origin: 50% 0;\n transform: rotate(-5deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-3 {\n animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n"},{"created":"2024-01-20T03:39:04.000Z","isPrivate":0,"projectId":"4fba46","snapshot":"https://s1.qingting.work/runjs/85b0327aa860.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by nikk7007","updated":"2024-01-20T05:39:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":573,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 0.8em 1.8em;\n border: 2px solid #17C3B2;\n position: relative;\n overflow: hidden;\n background-color: transparent;\n text-align: center;\n text-transform: uppercase;\n font-size: 16px;\n transition: .3s;\n z-index: 1;\n font-family: inherit;\n color: #17C3B2;\n}\n\nbutton::before {\n content: '';\n width: 0;\n height: 300%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n background: #17C3B2;\n transition: .5s ease;\n display: block;\n z-index: -1;\n}\n\nbutton:hover::before {\n width: 105%;\n}\n\nbutton:hover {\n color: #111;\n}\n"},{"created":"2024-01-20T03:37:11.000Z","isPrivate":0,"projectId":"147cd4","snapshot":"https://s1.qingting.work/runjs/cd48acf15f6e.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by adamgiebl","updated":"2024-01-20T05:37:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":170,"cssLen":1392,"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 font-family: inherit;\n font-size: 18px;\n border-radius: 40em;\n width: 8em;\n height: 3em;\n z-index: 1;\n color: white;\n cursor: pointer;\n overflow: hidden;\n border: none;\n}\n\nbutton .text {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n line-height: 3em;\n border-radius: 40em;\n border: none;\n background: linear-gradient(\n rgba(255, 255, 255, 0.473),\n rgba(150, 150, 150, 0.25)\n );\n z-index: 1;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\nbutton .blob {\n position: absolute;\n z-index: -1;\n border-radius: 5em;\n width: 5em;\n height: 3em;\n transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;\n}\n\nbutton .blob:nth-child(2) {\n left: 0em;\n top: 0;\n background: #ff930f;\n}\n\nbutton .blob:nth-child(3) {\n left: 1.8em;\n top: 0;\n z-index: -1;\n background: #bf0fff;\n}\n\nbutton .blob:nth-child(4) {\n left: 4em;\n top: -1em;\n background: #ff1b6b;\n}\n\nbutton .blob:nth-child(5) {\n left: 4.3em;\n top: 1.6em;\n background: #0061ff;\n}\n\nbutton:hover .blob:nth-child(2) {\n background: #0061ff;\n}\n\nbutton:hover .blob:nth-child(3) {\n background: #ff1b6b;\n}\n\nbutton:hover .blob:nth-child(4) {\n background: #bf0fff;\n}\n\nbutton:hover .blob:nth-child(5) {\n background: #ff930f;\n}\n\nbutton:hover .blob {\n transform: scale(1.3);\n}\n\nbutton:active {\n border: 2px solid white;\n}\n"},{"created":"2024-01-20T03:35:05.000Z","isPrivate":0,"projectId":"6c4789","snapshot":"https://s1.qingting.work/runjs/80663513b370.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by felipesntr","updated":"2024-01-20T05:35:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":278,"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 1em;\n border: 4px solid #fa725a;\n transition: ease-in-out 0.3s;\n background-color: transparent;\n color: #fa725a;\n font-weight: bolder;\n font-size: 16px;\n}\n\nbutton:hover {\n transform: scale(1.2) rotate(10deg);\n background-color: #fa725a;\n color: white;\n}"},{"created":"2024-01-20T03:33:53.000Z","isPrivate":0,"projectId":"df51eb","snapshot":"https://s1.qingting.work/runjs/d3cec88a8673.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by adamgiebl","updated":"2024-01-20T05:33:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":543,"cssLen":608,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cssbuttons-io-button {\n display: flex;\n align-items: center;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n padding: 0.8em 1.5em 0.8em 1.2em;\n color: white;\n background: #ad5389;\n background: linear-gradient(0deg, rgba(77,54,208,1) 0%, rgba(132,116,254,1) 100%);\n border: none;\n box-shadow: 0 0.7em 1.5em -0.5em #4d36d0be;\n letter-spacing: 0.05em;\n border-radius: 20em;\n}\n\n.cssbuttons-io-button svg {\n margin-right: 8px;\n}\n\n.cssbuttons-io-button:hover {\n box-shadow: 0 0.5em 1.5em -0.5em #4d36d0be;\n}\n\n.cssbuttons-io-button:active {\n box-shadow: 0 0.3em 1em -0.5em #4d36d0be;\n}"},{"created":"2024-01-20T03:32:50.000Z","isPrivate":0,"projectId":"9f5127","snapshot":"https://s1.qingting.work/runjs/7019beed74eb.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by andrew-demchenk0","updated":"2024-01-20T05:32:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":465,"cssLen":716,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 12px 8px 16px;\n gap: 8px;\n height: 40px;\n width: 128px;\n border: none;\n background: #056bfa27;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.lable {\n margin-top: 1px;\n font-size: 19px;\n line-height: 22px;\n color: #056DFA;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button:hover {\n background: #056bfa49;\n}\n\n.button:hover .svg-icon {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-8deg);\n }\n\n 50% {\n transform: rotate(0deg);\n }\n\n 75% {\n transform: rotate(8deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}"},{"created":"2024-01-20T03:32:13.000Z","isPrivate":0,"projectId":"990780","snapshot":"https://s1.qingting.work/runjs/fa88e1d1403e.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by alexreyes091","updated":"2024-01-20T05:32:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":686,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n padding: 1rem 2rem;\n font-weight: 700;\n background: rgb(255, 255, 255);\n color: blueviolet;\n border-radius: .5rem;\n border-bottom: 2px solid blueviolet;\n border-right: 2px solid blueviolet;\n border-top: 2px solid white;\n border-left: 2px solid white;\n transition-duration: 1s;\n transition-property: border-top, \n border-left, \n border-bottom,\n border-right,\n box-shadow;\n}\n\n.btn:hover {\n border-top: 2px solid blueviolet;\n border-left: 2px solid blueviolet;\n border-bottom: 2px solid rgb(238, 103, 238);\n border-right: 2px solid rgb(238, 103, 238);\n box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px;\n}"},{"created":"2024-01-19T09:47:00.000Z","isPrivate":0,"projectId":"b96593","snapshot":"https://s1.qingting.work/runjs/b524d09bfbd3.png?x-oss-process=style/webp-w-500","tags":"react","title":"React 18 Functional Template","updated":"2024-01-19T11:47:18.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":20,"cssLen":328,"jsLen":307,"nickname":"Sam","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELOosHHpNiblJ2wLSqQkQPkLSjn2F8ibqOPd0PTTKMmKB196TbLxTQXsicUp452AseIEUr1GfkbAE3EA/132","username":"0c2a3b","editors":"1110"}]}},"actionData":null,"errors":null}