{"loaderData":{"0":null,"0-3":{"total":7308,"projects":[{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"cb1143","snapshot":null,"tags":null,"title":"button by sahilxkhadka","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":577,"cssLen":1330,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* credits to uiverse.io/profile/eirikvold */\nbutton {\n font-family: inherit;\n font-size: 18px;\n background: rgb(24,119,240);\n background: linear-gradient(90deg, rgba(24,119,240,1) 0%, rgba(29,37,253,1) 50%, rgba(11,9,140,1) 100%);\n color: white;\n padding: 0.8em 1.2em;\n display: grid;\n grid-template-columns: auto 0fr;\n align-items: center;\n border: none;\n border-radius: 16px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);\n transition: all 0.3s;\n}\n\nbutton:hover {\n cursor: pointer;\n transform: translateY(-3px);\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);\n grid-template-columns: auto 1fr;\n}\n\nbutton:active {\n transform: scale(0.95);\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);\n}\n\nbutton span {\n display: block;\n margin-left: 0.4em;\n transition: all 0.3s;\n}\n\nbutton svg {\n transition: all 0.3s;\n}\n\nbutton .svg-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.2);\n transition: all 0.3s;\n}\n\nbutton:hover .svg-wrapper {\n background-color: rgba(255, 255, 255, 0.5);\n margin-right: 0.5em;\n animation: bounce 1.2s ease-in-out;\n}\n\n.text {\n overflow: hidden;\n}\n\n@keyframes bounce {\n 0% {\n translate: 0;\n }\n\n 50% {\n translate: 0 -8px;\n }\n\n 100% {\n translate: 0;\n }\n}\n\n"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"ae4bf6","snapshot":null,"tags":null,"title":"button by Navarog21","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":245,"cssLen":2265,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --sunGradient: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);\n --moonGradient: linear-gradient(to top, #cc208e 0%, #6713d2 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 140px;\n height: 60px;\n color: white;\n font-size: 1em;\n font-weight: bold;\n text-transform: uppercase;\n border-radius: 15px;\n background-color: transparent;\n transition: 0.5s;\n overflow: hidden;\n border: 4px solid black;\n}\n\nbutton:hover {\n box-shadow: -15px -15px 500px white;\n transition: 0.2s;\n}\n\nbutton:hover span {\n background: var(--sunGradient);\n}\n\n.state {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: inherit;\n transition: 0.4s;\n width: 85%;\n height: 82%;\n border: 4px solid black;\n}\n\n#sun {\n display: none;\n background-color: #212121;\n opacity: 0.85;\n}\n\n#moon {\n background-color: #212121;\n opacity: 0.85;\n}\n\nbutton:hover #sun {\n display: flex;\n}\n\nbutton:hover #moon {\n display: none;\n}\n\nbutton:hover .lightRotation {\n animation: 1s linear reverse infinite rotation413;\n}\n\nbutton:hover .lightRotation2 {\n animation: 2s linear infinite rotation_413;\n}\n\nbutton:hover .lightRotation3 {\n animation: 10s linear reverse infinite rotation_413;\n}\n\nbutton:hover .lightRotation4 {\n animation: 3s linear infinite rotation_413;\n}\n\n.lightRotation {\n position: absolute;\n transition: 0.4s;\n z-index: -1;\n width: 60px;\n height: 500px;\n transform: rotate(50deg);\n border-radius: inherit;\n background: var(--moonGradient);\n}\n\n.lightRotation2 {\n position: absolute;\n transition: 0.4s;\n z-index: -1;\n width: 75px;\n height: 500px;\n transform: rotate(110deg);\n border-radius: inherit;\n background: var(--moonGradient);\n}\n\n.lightRotation3 {\n position: absolute;\n transition: 0.4s;\n z-index: -1;\n width: 40px;\n height: 260px;\n border-radius: inherit;\n background: var(--moonGradient);\n}\n\n.lightRotation4 {\n position: absolute;\n transition: 0.4s;\n z-index: -1;\n width: 24px;\n height: 220px;\n transform: rotate(100deg);\n border-radius: inherit;\n background: var(--moonGradient);\n}\n\n@keyframes rotation_413 {\n from {\n transform: rotate(0deg)\n }\n\n to {\n transform: rotate(360deg)\n }\n}\n"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"f00919","snapshot":null,"tags":null,"title":"button by Juanes200122","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":683,"cssLen":1595,"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 \n \n \n

\n","css":"ul {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n margin: 0;\n padding: 0;\n display: flex;\n}\nul li {\n list-style: none;\n}\nul li a {\n display: block;\n position: relative;\n width: 100px;\n height: 100px;\n line-height: 100px;\n font-size: 40px;\n text-align: center;\n text-decoration: none;\n color: #404040;\n margin: 0 30px;\n transition: 0.5s;\n}\nul li a span {\n position: absolute;\n transition: transform 0.5s;\n}\nul li a span:nth-child(1),\nul li a span:nth-child(3) {\n width: 100%;\n height: 3px;\n background: #404040;\n}\nul li a span:nth-child(1) {\n top: 0;\n left: 0;\n transform-origin: right;\n}\nul li a:hover span:nth-child(1) {\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.5s;\n}\n\nul li a span:nth-child(3) {\n bottom: 0;\n left: 0;\n transform-origin: left;\n}\nul li a:hover span:nth-child(3) {\n transform: scaleX(0);\n transform-origin: right;\n transition: transform 0.5s;\n}\n\nul li a span:nth-child(2),\nul li a span:nth-child(4) {\n width: 3px;\n height: 100%;\n background: #404040;\n}\nul li a span:nth-child(2) {\n top: 0;\n left: 0;\n transform: scale(0);\n transform-origin: bottom;\n}\nul li a:hover span:nth-child(2) {\n transform: scale(1);\n transform-origin: top;\n transition: transform 0.5s;\n}\nul li a span:nth-child(4) {\n top: 0;\n right: 0;\n transform: scale(0);\n transform-origin: top;\n}\nul li a:hover span:nth-child(4) {\n transform: scale(1);\n transform-origin: bottom;\n transition: transform 0.5s;\n}\n\n.facebook:hover {\n color: #3b5998;\n}\n.facebook:hover span {\n background: #3b5998;\n}\n"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"6f9bef","snapshot":null,"tags":null,"title":"button by suda-code","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":51,"cssLen":286,"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 color: #ffffff;\n font-size: 18px;\n background: #58cc02;\n border: none !important;\n padding: 15px 16px;\n box-shadow: 0 4px 0 #58a700;\n border-radius: 12px;\n cursor: pointer;\n}\n\nbutton:active {\n box-shadow: none;\n transform: translate(0, 4px);\n}"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"8ec124","snapshot":null,"tags":null,"title":"button by zjssun","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":970,"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 border: none;\n background: transparent;\n --stroke-color: #ffffff7c;\n --ani-color: rgba(95, 3, 244, 0);\n --color-gar: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);\n letter-spacing: 3px;\n font-size: 2em;\n font-family: \"Arial\";\n text-transform: uppercase;\n color: transparent;\n -webkit-text-stroke: 1px var(--stroke-color);\n cursor: pointer;\n}\n\n.front-text {\n position: absolute;\n top: 0;\n left: 0;\n width: 0%;\n background: var(--color-gar);\n -webkit-background-clip: text;\n background-clip: text;\n background-size: 200%;\n overflow: hidden;\n transition: all 1s;\n animation: 8s ani infinite;\n border-bottom: 2px solid transparent;\n}\n\n.button:hover .front-text {\n width: 100%;\n border-bottom: 2px solid #03a9f4;\n -webkit-text-stroke: 1px var(--ani-color);\n}\n\n@keyframes ani {\n 0% {\n background-position: 0%;\n }\n\n 50% {\n background-position: 400%;\n }\n\n 100% {\n background-position: 0%;\n }\n}\n"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"69ad45","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":792,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n position: relative;\n font-size: 17px;\n text-transform: uppercase;\n text-decoration: none;\n padding: 1em 2.5em;\n display: inline-block;\n border-radius: 50px;\n transition: all .3s;\n border: none;\n font-family: Arial, sans-serif;\n font-weight: 600;\n color: white;\n background-color: #3498db;\n cursor: pointer;\n}\n\n.btn:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.btn:active {\n transform: scale(0.95);\n box-shadow: none;\n}\n\n.btn::after {\n content: \"\";\n display: inline-block;\n height: 100%;\n width: 100%;\n border-radius: 50px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n transition: all .4s;\n}\n\n.btn::after {\n background-color: #2980b9;\n}\n\n.btn:hover::after {\n transform: scaleX(1.2) scaleY(1.4);\n opacity: 0;\n}"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"18409b","snapshot":"https://s1.qingting.work/runjs/6f53ab97f1ed.png?x-oss-process=style/webp-w-500","tags":"antd,vue","title":"Vue3 Template","updated":"2024-02-02T07:43:37.000Z","isTemplate":0,"htmlType":"html","pureCSS":1,"htmlLen":35,"cssLen":0,"jsLen":361,"nickname":"🇨 🇨","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/AcJM5WNhE078R44jqM1Gj1ticVQq5icuicoXHLZTvczYbl7k5AgUJxMZyUJC7Q2iafwUbyFjDcbHjkibI0EPArsvKjA/132","username":"ed4ea8","editors":"1010","html":"

\n {{message}}\n

","css":""},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"681d54","snapshot":null,"tags":null,"title":"button by ramz04","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":49,"cssLen":506,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* inspired form gumroad website */\n/* inspired form gumroad website */\n.button {\n --bg: #000;\n --hover-bg: #ff90e8;\n --hover-text: #000;\n color: #fff;\n border: 1px solid var(--bg);\n border-radius: 4px;\n padding: 0.8em 2em;\n background: var(--bg);\n transition: 0.2s;\n}\n\n.button:hover {\n color: var(--hover-text);\n transform: translate(0.25rem,-0.25rem);\n background: var(--hover-bg);\n box-shadow: -0.25rem 0.25rem var(--bg);\n}\n\n.button:active {\n transform: translate(0);\n box-shadow: none;\n}"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"d37e62","snapshot":null,"tags":null,"title":"button by hamoode-taha-04","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":794,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".ui-btn {\n cursor: pointer;\n border-radius: 5px;\n color: rgb(219, 218, 218);\n border-style: solid;\n background-color: transparent;\n border-color: rgb(219, 218, 218);\n width: 120px;\n height: 40px;\n transition: 0.2s ease;\n text-transform: uppercase;\n border-width: 2px;\n font-weight: 500;\n font-size: 18px;\n letter-spacing: 2px;\n}\n.ui-btn:hover {\n color: rgb(247, 247, 247);\n background-color: rgb(0, 81, 255);\n border-color: rgb(0, 81, 255);\n text-shadow: 0 0 50px white, 0 0 20px white, 0 0 15px white;\n box-shadow: 0 0 50px rgb(0, 81, 255), 0 0 30px rgb(0, 81, 255),\n 0 0 60px rgb(0, 81, 255), 0 0 120px rgb(0, 81, 255);\n font-size: 20px;\n width: 130px;\n height: 50px;\n letter-spacing: 3px;\n}\n.ui-btn:active {\n width: 115px;\n height: 38px;\n letter-spacing: 0px;\n}\n"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"60b8f9","snapshot":null,"tags":null,"title":"button by EmmaxPlay","updated":"2024-01-22T16:59:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1112,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n padding: 0.9em 1.6em;\n border: none;\n outline: none;\n color: #FFF;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n cursor: pointer;\n position: relative;\n z-index: 0;\n border-radius: 12px;\n}\n\n.btn::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgb(46, 46, 46);\n left: 0;\n top: 0;\n border-radius: 10px;\n}\n/* glow */\n.btn::before {\n content: \"\";\n background: linear-gradient(\n 45deg,\n #FF0000, #002BFF, #FF00C8, #002BFF,\n #FF0000, #002BFF, #FF00C8, #002BFF\n);\n position: absolute;\n top: -2px;\n left: -2px;\n background-size: 600%;\n z-index: -1;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n filter: blur(8px);\n animation: glowing 20s linear infinite;\n transition: opacity .3s ease-in-out;\n border-radius: 10px;\n opacity: 0;\n}\n\n@keyframes glowing {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\n/* hover */\n.btn:hover::before {\n opacity: 1;\n}\n\n.btn:active:after {\n background: transparent;\n}\n\n.btn:active {\n color: #000;\n font-weight: bold;\n}"},{"created":"2024-01-22T16:59:58.000Z","isPrivate":0,"projectId":"434d00","snapshot":null,"tags":null,"title":"button by ahmed150up2","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".button {\n --key-text-color: #969faf;\n --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);\n --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);\n border: none;\n background: var(--docsearch-key-gradient);\n border-radius: 3px;\n box-shadow: var(--docsearch-key-shadow);\n color: var(--key-text-color);\n height: 2.5em;\n text-align: center;\n padding: 0.6em;\n margin: 0 0.6em;\n display: inline-block;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 1em;\n min-width: 1em;\n line-height: 1em;\n user-select: none;\n}\n\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"867f5d","snapshot":null,"tags":null,"title":"button by aseel-al-zubaidi_pwcit","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":2118,"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 display: inline-block;\n cursor: pointer;\n outline: none;\n border: 0;\n vertical-align: middle;\n text-decoration: none;\n font-family: inherit;\n font-size: 15px;\n}\n\nbutton.learn-more {\n font-weight: 600;\n color: #e88d14;\n text-transform: uppercase;\n padding: 1.25em 2em;\n background: #ad1b02;\n border: 2px solid #f3be26;\n border-radius: 0.75em;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1),\n -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),\n background 150ms cubic-bezier(0, 0, 0.58, 1),\n -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more::before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: #f3be26;\n border-radius: inherit;\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0.75em, -1em);\n transform: translate3d(0, 0.75em, -1em);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),\n box-shadow 150ms cubic-bezier(0, 0, 0.58, 1),\n -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1),\n -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more:hover {\n background: #ffe9e9;\n -webkit-transform: translate(0, 0.25em);\n transform: translate(0, 0.25em);\n}\n\nbutton.learn-more:hover::before {\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0.5em, -1em);\n transform: translate3d(0, 0.5em, -1em);\n}\n\nbutton.learn-more:active {\n background: #ffe9e9;\n -webkit-transform: translate(0em, 0.75em);\n transform: translate(0em, 0.75em);\n}\n\nbutton.learn-more:active::before {\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0, -1em);\n transform: translate3d(0, 0, -1em);\n}\n"}]}},"actionData":null,"errors":null}