{"loaderData":{"0":null,"0-3":{"total":7509,"projects":[{"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"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"3b5f68","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":723,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(89, 182, 35);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: rgb(53, 144, 0);\n color: white;\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -6px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(232, 255, 219);\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"cd2ba8","snapshot":null,"tags":null,"title":"button by mi-series","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":195,"cssLen":2193,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".container {\n border: none;\n}\n\n.container .card {\n background-color: white;\n border-radius: 10px;\n border: 1px solid black;\n position: relative;\n z-index: 0;\n transition: all 300ms ease-out;\n transform-origin: center center;\n width: 150px;\n height: 50px;\n box-shadow: 0px;\n outline: none;\n}\n\n.card-header {\n padding: 10px;\n background: linear-gradient(90deg, #CB2D6F 20px, transparent 100%) center / 22px 22px,\n\t\tlinear-gradient(#CB2D6F 20px, transparent 100%) center / 22px 22px,\n\t\t#fff;\n color: white;\n height: 100%;\n font-size: 20px;\n font-weight: 600;\n border: 1px solid white;\n border-radius: 10px;\n}\n\n.container .card .border {\n transition: all 300ms ease-out;\n transform-origin: center center;\n position: absolute;\n top: 6px;\n left: 6px;\n width: calc(100% - 0px);\n height: calc(100% - 0px);\n border: 1px solid black;\n border-radius: 9px;\n}\n\n.container a {\n opacity: 0;\n position: absolute;\n z-index: 1;\n width: 50%;\n height: 50%;\n}\n\n.container a:hover,\n.container a:focus {\n transform: translateZ(50px);\n}\n\n.container a:hover ~ .card .card-header,\n.container a:focus ~ .card .card-header {\n transform: translateZ(24px);\n}\n\n.container a:nth-child(1) {\n top: 0;\n left: 0;\n}\n\n.container a:nth-child(1):hover ~ .card,\n.container a:nth-child(1):focus ~ .card {\n transform: rotateX(10deg) rotateY(-10deg) translateZ(0);\n transform-origin: right bottom;\n box-shadow: 10px 20px;\n}\n\n.container a:nth-child(2) {\n top: 0;\n right: 0;\n}\n\n.container a:nth-child(2):hover ~ .card,\n.container a:nth-child(2):focus ~ .card {\n transform: rotateX(10deg) rotateY(10deg) translateZ(0);\n transform-origin: left bottom;\n box-shadow: -10px 20px;\n}\n\n.container a:nth-child(3) {\n bottom: 0;\n right: 0;\n}\n\n.container a:nth-child(3):hover ~ .card ,\n.container a:nth-child(3):focus ~ .card {\n transform-origin: left top;\n transform: rotateX(-10deg) rotateY(10deg) translateZ(0);\n box-shadow: -10px -20px;\n}\n\n.container a:nth-child(4) {\n bottom: 0;\n left: 0;\n}\n\n.container a:nth-child(4):hover ~ .card,\n.container a:nth-child(4):focus ~ .card {\n transform-origin: right top;\n transform: rotateX(-10deg) rotateY(-10deg) translateZ(0);\n box-shadow: 10px -20px;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"eecaa0","snapshot":null,"tags":null,"title":"button by NAKAMOZ","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":856,"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 background-color: transparent;\n color: white;\n border: none;\n font-size: 17px;\n position: relative;\n z-index: 3;\n transition: 0.5s;\n -webkit-transition: 0.5s;\n -moz-transition: 0.5s;\n -ms-transition: 0.5s;\n -o-transition: 0.5s;\n}\n\nbutton::before {\n content: \"\";\n border: 3px solid white;\n position: absolute;\n left: -25px;\n bottom: 0;\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 60px;\n -webkit-border-radius: 60px;\n -moz-border-radius: 60px;\n -ms-border-radius: 60px;\n -o-border-radius: 60px;\n transition: 0.5s;\n -webkit-transition: 0.5s;\n -moz-transition: 0.5s;\n -ms-transition: 0.5s;\n -o-transition: 0.5s;\n}\n\nbutton:hover::before {\n left: -25px;\n bottom: -17.5px;\n width: 100%;\n padding: 20px;\n background-color: white;\n z-index: -1;\n}\n\nbutton:hover {\n color: #282828;\n}\n"}]}},"actionData":null,"errors":null}