{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"e12494","snapshot":null,"tags":null,"title":"button by yaasiinaxmed","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":636,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n --color: #0077ff;\n font-family: inherit;\n display: inline-block;\n width: 6em;\n height: 2.6em;\n line-height: 2.5em;\n overflow: hidden;\n cursor: pointer;\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: 0.3s all;\n}\n\nbutton:hover::before {\n top: -30px;\n left: -30px;\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"e090b9","snapshot":null,"tags":null,"title":"button by lenfear23","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":567,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n margin: 12px;\n height: 50px;\n width: 120px;\n border-radius: 10px;\n background: #333;\n justify-content: center;\n align-items: center;\n box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #444,\n inset -5px -5px 10px #222;\n font-family: \"Damion\", cursive;\n cursor: pointer;\n border: none;\n font-size: 16px;\n color: rgb(161, 161, 161);\n transition: 500ms;\n}\n\nbutton:hover {\n box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #222,\n inset -5px -5px 10px #444;\n color: #d6d6d6;\n transition: 500ms;\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"201cfc","snapshot":null,"tags":null,"title":"button by gksckt","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":420,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #444141;\n border-radius: 4px;\n color: #fff;\n cursor: pointer;\n padding: 15px 30px;\n font-size: 18px;\n font-weight: bold;\n letter-spacing: 1px;\n border: none;\n}\n\nbutton:hover {\n background-image: linear-gradient(90deg, #53cbef 0%, #dcc66c 50%, #ffa3b6 75%, #53cbef 100%);\n animation: slidernbw 5s linear infinite;\n color: #000;\n}\n\n@keyframes slidernbw {\n to {\n background-position: 20vw;\n }\n}"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"991c25","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2532,"cssLen":1069,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Documents-btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: fit-content;\n height: 45px;\n border: none;\n padding: 0px 15px;\n border-radius: 5px;\n background-color: rgb(49, 49, 83);\n gap: 10px;\n cursor: pointer;\n transition: all 0.3s;\n}\n.folderContainer {\n width: 40px;\n height: fit-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n position: relative;\n}\n.fileBack {\n z-index: 1;\n width: 80%;\n height: auto;\n}\n.filePage {\n width: 50%;\n height: auto;\n position: absolute;\n z-index: 2;\n transition: all 0.3s ease-out;\n}\n.fileFront {\n width: 85%;\n height: auto;\n position: absolute;\n z-index: 3;\n opacity: 0.95;\n transform-origin: bottom;\n transition: all 0.3s ease-out;\n}\n.text {\n color: white;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n.Documents-btn:hover .filePage {\n transform: translateY(-5px);\n}\n.Documents-btn:hover {\n background-color: rgb(58, 58, 94);\n}\n.Documents-btn:hover .fileFront {\n transform: rotateX(30deg);\n}\n"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"2c4a8f","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":719,"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 color: #fff;\n font-size: 17px;\n text-transform: uppercase;\n font-weight: 600;\n border: none;\n padding: 20px 30px;\n perspective: 30rem;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308);\n}\n\nbutton::before {\n content: '';\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: 10px;\n background: linear-gradient(320deg, rgba(0, 140, 255, 0.678), rgba(128, 0, 128, 0.308));\n z-index: 1;\n transition: background 3s;\n}\n\nbutton:hover::before {\n animation: rotate 1s;\n transition: all .5s;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateY(180deg);\n }\n\n 100% {\n transform: rotateY(360deg);\n }\n}"},{"created":"2024-01-22T16:59:42.000Z","isPrivate":0,"projectId":"cf4c84","snapshot":null,"tags":null,"title":"button by portseif","updated":"2024-01-22T16:59:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":727,"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-color: transparent;\n color: #fff;\n cursor: pointer;\n display: flex;\n font-family: ui-sans-serif,system-ui,-apple-system,system-ui,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5;\n text-decoration: none;\n text-transform: uppercase;\n outline: 0;\n border: 0;\n padding: 1rem;\n}\n\nbutton:before {\n background-color: #fff;\n content: \"\";\n display: inline-block;\n height: 1px;\n margin-right: 10px;\n transition: all .42s cubic-bezier(.25,.8,.25,1);\n width: 0;\n}\n\nbutton:hover:before {\n background-color: #fff;\n width: 3rem;\n}"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"f84930","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":14575,"cssLen":4143,"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: 13px 35px;\n background: #f5ddb7;\n font-size: 17px;\n font-weight: 900;\n color: #181818;\n border: none;\n border-radius: 8px;\n box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;\n transition: all .3s ease-in-out;\n}\n\n.icon-1 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -1;\n}\n\n.icon-2 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-3 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-4 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\n.icon-5 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all .5s ease-in-out;\n z-index: -2;\n}\n\nbutton:hover {\n padding: 13px 25px;\n border-radius: 8px 8px 24px 24px;\n}\n\nbutton:hover .icon-1 {\n top: -250%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 50px;\n height: auto;\n animation: inIcon1 1s ease .45s forwards;\n}\n\n@keyframes inIcon1 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 25% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(5deg);\n }\n\n 50% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(1deg);\n }\n\n 65% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-2 {\n position: absolute;\n top: -200%;\n left: 90%;\n transform: translate(-50%, 0);\n width: 75px;\n height: auto;\n animation: inIcon2 1s ease .45s forwards;\n}\n\n@keyframes inIcon2 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(10deg);\n }\n\n 50% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(4deg);\n }\n\n 80% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(5deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-3 {\n position: absolute;\n top: -130%;\n left: 20%;\n transform: translate(-50%, 0);\n width: 60px;\n height: auto;\n animation: inIcon3 1s ease .45s forwards;\n}\n\n@keyframes inIcon3 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-2deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-4 {\n position: absolute;\n top: -300%;\n left: 10%;\n transform: translate(-50%, 0);\n width: 85px;\n height: auto;\n animation: inIcon4 1s ease .45s forwards;\n}\n\n@keyframes inIcon4 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 40% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-5 {\n position: absolute;\n top: -350%;\n left: 90%;\n transform: translate(-50%, 0);\n width: 85px;\n height: auto;\n animation: inIcon5 1s ease .45s forwards;\n}\n\n@keyframes inIcon5 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(-3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\n.fil-leaf-1 {\n fill: #7B9B3A\n}\n\n.fil-leaf-2 {\n fill: #556729;\n fill-rule: nonzero\n}\n\n.fil-leaf-3 {\n fill: #556729\n}\n\n.fil-leaf-4 {\n fill: #3C4819\n}\n\n.fil-leaf-5 {\n fill: #3C4819\n}"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"cff2bf","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":832,"cssLen":903,"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: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 1px solid #17795E;\n background-color: #209978;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(22px);\n color: #fff;\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: #17795E;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: #fff;\n}\n\n.button:hover {\n background: #17795E;\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active .button__icon {\n background-color: #146c54;\n}\n\n.button:active {\n border: 1px solid #146c54;\n}"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"905082","snapshot":null,"tags":null,"title":"button by ZacharyCrespin","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23,"cssLen":595,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n transition: all 0.5s;\n font-size: 17px;\n padding: 1ch 2ch;\n background-color: white;\n color: #000;\n font-family: Roboto, sans-serif;\n border: none;\n border-radius: 2px;\n box-shadow: 2px 2px 0px hsl(0, 0%, 90%),\n 4px 4px 0px hsl(0, 0%, 80%),\n 6px 6px 0px hsl(0, 0%, 70%),\n 8px 8px 0px hsl(0, 0%, 60%),\n 10px 10px 0px hsl(0, 0%, 50%),\n 12px 12px 0px hsl(0, 0%, 40%),\n 14px 14px 0px hsl(0, 0%, 30%),\n 16px 16px 0px hsl(0, 0%, 20%),\n 18px 18px 0px hsl(0, 0%, 10%);\n}\n\nbutton:hover {\n background-color: hsl(0, 0%, 50%);\n color: #fff;\n box-shadow: none;\n}"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"96f26d","snapshot":null,"tags":null,"title":"button by mobinkakei","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1502,"cssLen":799,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":"button {\n color: white;\n background-color: #1D4ED8;\n --ring-color: #93C5FD;\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: #1E40AF;\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: spin_357 1s linear infinite;\n}\n\n@keyframes spin_357 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"9eb86e","snapshot":null,"tags":null,"title":"button by SpatexDEV","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":567,"cssLen":643,"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 display: flex;\n padding: 0.75rem 1.5rem;\n background-color: #488aec;\n color: #ffffff;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n user-select: none;\n gap: 0.75rem;\n box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;\n transition: all .6s ease;\n}\n\nbutton:hover {\n box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;\n}\n\nbutton:focus,button:active {\n opacity: .85;\n box-shadow: none;\n}\n\nbutton svg {\n width: 1.25rem;\n height: 1.25rem;\n}"},{"created":"2024-01-22T16:59:41.000Z","isPrivate":0,"projectId":"f63421","snapshot":null,"tags":null,"title":"button by Pradeepsaranbishnoi","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3971,"cssLen":2490,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".voltage-button {\n position: relative;\n}\n\n.voltage-button button {\n color: white;\n background: #0D1127;\n padding: 1rem 3rem 1rem 3rem;\n border-radius: 5rem;\n border: 5px solid #5978F3;\n font-size: 1.2rem;\n line-height: 1em;\n letter-spacing: 0.075em;\n transition: background 0.3s;\n}\n\n.voltage-button button:hover {\n cursor: pointer;\n background: #0F1C53;\n}\n\n.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {\n opacity: 1;\n}\n\n.voltage-button svg {\n display: block;\n position: absolute;\n top: -0.75em;\n left: -0.25em;\n width: calc(100% + 0.5em);\n height: calc(100% + 1.5em);\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.4s;\n transition-delay: 0.1s;\n}\n\n.voltage-button svg path {\n stroke-dasharray: 100;\n filter: url(\"#glow\");\n}\n\n.voltage-button svg path.line-1 {\n stroke: #f6de8d;\n stroke-dashoffset: 0;\n animation: spark-1 3s linear infinite;\n}\n\n.voltage-button svg path.line-2 {\n stroke: #6bfeff;\n stroke-dashoffset: 500;\n animation: spark-2 3s linear infinite;\n}\n\n.voltage-button .dots {\n opacity: 0;\n transition: opacity 0.3s;\n transition-delay: 0.4s;\n}\n\n.voltage-button .dots .dot {\n width: 1rem;\n height: 1rem;\n background: white;\n border-radius: 100%;\n position: absolute;\n opacity: 0;\n}\n\n.voltage-button .dots .dot-1 {\n top: 0;\n left: 20%;\n animation: fly-up 3s linear infinite;\n}\n\n.voltage-button .dots .dot-2 {\n top: 0;\n left: 55%;\n animation: fly-up 3s linear infinite;\n animation-delay: 0.5s;\n}\n\n.voltage-button .dots .dot-3 {\n top: 0;\n left: 80%;\n animation: fly-up 3s linear infinite;\n animation-delay: 1s;\n}\n\n.voltage-button .dots .dot-4 {\n bottom: 0;\n left: 30%;\n animation: fly-down 3s linear infinite;\n animation-delay: 2.5s;\n}\n\n.voltage-button .dots .dot-5 {\n bottom: 0;\n left: 65%;\n animation: fly-down 3s linear infinite;\n animation-delay: 1.5s;\n}\n\n@keyframes spark-1 {\n to {\n stroke-dashoffset: -1000;\n }\n}\n\n@keyframes spark-2 {\n to {\n stroke-dashoffset: -500;\n }\n}\n\n@keyframes fly-up {\n 0% {\n opacity: 0;\n transform: translateY(0) scale(0.2);\n }\n\n 5% {\n opacity: 1;\n transform: translateY(-1.5rem) scale(0.4);\n }\n\n 10%, 100% {\n opacity: 0;\n transform: translateY(-3rem) scale(0.2);\n }\n}\n\n@keyframes fly-down {\n 0% {\n opacity: 0;\n transform: translateY(0) scale(0.2);\n }\n\n 5% {\n opacity: 1;\n transform: translateY(1.5rem) scale(0.4);\n }\n\n 10%, 100% {\n opacity: 0;\n transform: translateY(3rem) scale(0.2);\n }\n}\n"}]}},"actionData":null,"errors":null}