{"loaderData":{"0":null,"0-2":{"total":7069,"projects":[{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"36c664","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1158,"cssLen":889,"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 #cc0000;\n background-color: #e50000;\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(35px);\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: #cc0000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n}\n\n.button:hover {\n background: #cc0000;\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: #b20000;\n}\n\n.button:active {\n border: 1px solid #b20000;\n}"},{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"266e3f","snapshot":null,"tags":null,"title":"button by mayurd8862","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":435,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: linear-gradient(to right, rgb(241, 225, 119), \n rgb(180, 67, 241));\n font-family: inherit;\n padding: 0.6em 1.3em;\n font-weight: 900;\n font-size: 18px;\n border: 2px solid black;\n border-radius: 0.4em;\n box-shadow: 0.1em 0.1em;\n}\n\nbutton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.15em 0.15em;\n}\n\nbutton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.05em 0.05em;\n}"},{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"e385a7","snapshot":null,"tags":null,"title":"button by Abhi-33","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36,"cssLen":659,"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 text-transform: uppercase;\n border-radius: 8px;\n font-size: 17px;\n font-weight: 500;\n color: #ffffff80;\n text-shadow: none;\n background: transparent;\n box-shadow: transparent;\n border: 1px solid #ffffff80;\n transition: 0.5s ease;\n user-select: none;\n}\n\n#btn:hover,:focus {\n color: #ffffff;\n background: #008cff;\n border: 1px solid #008cff;\n text-shadow: 0 0 5px #ffffff,\n 0 0 10px #ffffff,\n 0 0 20px #ffffff;\n box-shadow: 0 0 5px #008cff,\n 0 0 20px #008cff,\n 0 0 50px #008cff,\n 0 0 100px #008cff;\n font-size: 16px;\n border-color: transparent;\n}"},{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"fc9641","snapshot":null,"tags":null,"title":"button by KSAplay","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":766,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n padding: 0.5em 2em 0.5em 2.5em;\n font-size: 1em;\n font-weight: bold;\n border-radius: 15px;\n color: #fff6fb;\n letter-spacing: 0.3em;\n text-shadow: -2px 2px 5px #FD3084;\n background-color: transparent;\n border: 2px solid #FEB1DE;\n box-shadow: 0 0 0px 1px #F11271,\n 0 0 10px 2px #FD3084,\n inset 0 0 0px 1px #F11271,\n inset 0 0 10px 2px #FD3084;\n transition: 100ms;\n}\n\n.btn:hover {\n box-shadow: 0 0 0px 1px #F11271,\n 0 0 10px 2px #FD3084,\n inset 0 0 0px 1px #F11271,\n inset 0 0 30px 2px #FD3084;\n text-shadow: 0 0 10px #FD3084;\n transform: translateY(-5px);\n}\n\n.btn:active {\n box-shadow: 0 0 0px 1px #F11271,\n 0 0 25px 2px #FD3084,\n inset 0 0 0px 1px #F11271,\n inset 0 0 30px 2px #FD3084;\n transform: translateY(1px);\n}"},{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"8eff8c","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":998,"cssLen":1009,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-bottom-16 {\n bottom: -4rem\n}\n\n.bottom-12 {\n bottom: 3rem\n}\n\n.right-0 {\n right: 0px\n}\n\n.right-12 {\n right: 3rem\n}\n\n.right-16 {\n right: 4rem\n}\n\n.right-20 {\n right: 5rem\n}\n\n.right-24 {\n right: 6rem\n}\n\n.right-4 {\n right: 1rem\n}\n\n.right-8 {\n right: 2rem\n}\n\n.z-10 {\n z-index: 10\n}\n\n.h-12 {\n height: 3rem\n}\n\n.h-16 {\n height: 4rem\n}\n\n.w-28 {\n width: 7rem\n}\n\n.w-4 {\n width: 1rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.bg-cyan-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(8 145 178 / var(--tw-bg-opacity))\n}\n\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-neutral-50 {\n --tw-text-opacity: 1;\n color: rgb(250 250 250 / var(--tw-text-opacity))\n}\n\n.delay-500 {\n transition-delay: 500ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.group:hover .group-hover\\:-bottom-1 {\n bottom: -0.25rem\n}"},{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"e145d1","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1385,"cssLen":820,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".palette-button {\n background-color: #fff;\n width: 170px;\n height: 55px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: 0px 0px 10px rgb(196, 196, 196);\n transition: all 0.3s;\n}\n.palette {\n width: 30px;\n transition: all 0.3s;\n}\n.palette-button:hover .palette {\n transform: rotate(-45deg);\n}\n.palette path {\n fill: rgb(255, 163, 183);\n stroke-width: 0;\n}\n.drop1 {\n fill: rgb(115, 115, 255);\n stroke-width: 0;\n}\n.drop2 {\n fill: red;\n stroke-width: 0;\n}\n.drop3 {\n fill: yellow;\n stroke-width: 0;\n}\n.drop4 {\n fill: rgb(104, 255, 255);\n stroke-width: 0;\n}\n.palette-button:hover {\n transform: scale(1.05);\n background-color: rgb(176, 115, 255);\n color: white;\n}\n"},{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"083589","snapshot":null,"tags":null,"title":"button by Baimyrzaev","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":160,"cssLen":1349,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 20px 60px;\n background-color: #000;\n border: none;\n font-size: 18px;\n position: relative;\n /* overflow: hidden; */\n transition: 500ms;\n}\n\nbutton span {\n color: gray;\n position: relative;\n transition: 500ms;\n transition-delay: 500ms;\n font-size: 16px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: 600;\n}\n\nbutton:before {\n content: '';\n position: absolute;\n width: 0%;\n height: 0%;\n left: 50%;\n right: 50%;\n top: 50%;\n bottom: 50%;\n transition: 500ms;\n transition-delay: 500ms;\n background-color: red;\n box-shadow: 0 0 10px red,\n 0 0 30px red, \n 0 0 50px red;\n}\n\nbutton div {\n transition: 500ms;\n position: absolute;\n background-color: red;\n box-shadow: 0 0 15px red, 0 0 30px red, 0 0 50px red;\n}\n\nbutton .top {\n width: 15px;\n height: 2px;\n top: 0;\n left: 0;\n}\n\nbutton .bottom {\n width: 15px;\n height: 2px;\n bottom: 0;\n right: 0;\n}\n\nbutton .left {\n width: 2px;\n height: 15px;\n top: 0;\n left: 0;\n}\n\nbutton .right {\n width: 2px;\n height: 15px;\n bottom: 0;\n right: 0;\n}\n\nbutton:hover {\n color: #000;\n}\n\nbutton:hover span {\n color: #000;\n}\n\nbutton:hover:before {\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\nbutton:hover .top, \nbutton:hover .bottom {\n width: 100%;\n}\n\nbutton:hover .left,\nbutton:hover .right {\n height: 100%;\n}"},{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"6bd7b6","snapshot":null,"tags":null,"title":"button by vikas7754","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1128,"cssLen":1066,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n C\n

\n","css":".container {\n background: #ff6f6f;\n border-radius: 15px;\n padding: 15px;\n display: flex;\n gap: 15px;\n box-shadow: 3px 5px 10px #ff7a7a, inset 3px 0 0 #ff5751d6,\n inset -3px 0 0 #ff5751d6, inset 0 3px 0 #ffffff23, inset 0 -3px 0 #00000023;\n}\n.btn {\n text-decoration: none;\n border: none;\n outline: none;\n background: #ff6f6f;\n padding: 10px;\n box-shadow: 0 0 5px #0000005a, 2px 2px 3px #00000078,\n inset 1px 1px 2px #ffffff9d;\n border-radius: 10px;\n color: #fff;\n font-size: 16px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n font-family: sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.btn:focus {\n animation: 0.3s clicked linear;\n}\n.cmd {\n display: flex;\n gap: 10px;\n flex-direction: column;\n justify-content: center;\n align-items: flex-end;\n}\n.c {\n width: 75px;\n font-size: 1.5rem;\n}\n@keyframes clicked {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(0.95);\n box-shadow: 0 0 5px #00000067, inset 0 0 3px #ffffff78;\n }\n 100% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T17:00:42.000Z","isPrivate":0,"projectId":"82b38b","snapshot":null,"tags":null,"title":"button by aadium","updated":"2024-01-22T17:00:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":273,"cssLen":1131,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".paste-button {\n position: relative;\n display: block;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.button {\n background-color: #4CAF50;\n color: #212121;\n padding: 10px 15px;\n font-size: 15px;\n font-weight: bold;\n border: 2px solid transparent;\n border-radius: 15px;\n cursor: pointer;\n}\n\n.dropdown-content {\n display: none;\n font-size: 13px;\n position: absolute;\n z-index: 1;\n min-width: 200px;\n background-color: #212121;\n border: 2px solid #4CAF50;\n border-radius: 0px 15px 15px 15px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n}\n\n.dropdown-content a {\n color: #4CAF50;\n padding: 8px 10px;\n text-decoration: none;\n display: block;\n transition: 0.1s;\n}\n\n.dropdown-content a:hover {\n background-color: #4CAF50;\n color: #212121;\n}\n\n.dropdown-content a:focus {\n background-color: #212121;\n color: #4CAF50;\n}\n\n.dropdown-content #top:hover {\n border-radius: 0px 13px 0px 0px;\n}\n\n.dropdown-content #bottom:hover {\n border-radius: 0px 0px 13px 13px;\n}\n\n.paste-button:hover button {\n border-radius: 15px 15px 0px 0px;\n}\n\n.paste-button:hover .dropdown-content {\n display: block;\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"c3d8dd","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":580,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: inline-block;\n position: relative;\n padding: 13px 20px;\n border: none;\n background: rgba(51, 50, 50, 0.287);\n color: #ffffff;\n font-family: Arial, sans-serif;\n font-size: 16px;\n text-transform: uppercase;\n cursor: crosshair;\n overflow: hidden;\n}\n\n.button:before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);\n transition: left 0.3s ease;\n}\n\n.button:hover:before {\n left: 100%;\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"4f8ff3","snapshot":null,"tags":null,"title":"button by pradipkaityuiux","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":58,"cssLen":1144,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-color: #000fdb;\n border: none;\n padding: 20px 48px;\n color: #fff;\n cursor: pointer;\n border-radius: 40px;\n position: relative;\n z-index: 10;\n overflow: hidden;\n}\n\n.button span {\n font-size: 24px;\n font-weight: bold;\n}\n\n.button::before,\n.button::after {\n content: \"\";\n position: absolute;\n width: 100px;\n height: 100px;\n border-radius: 50px;\n z-index: -1;\n background-color: #535fff;\n transition: all 0.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.button::after {\n right: -30px;\n transform: translateX(30px) translateY(-110px) rotate(30deg);\n}\n\n.button::before {\n left: -20px;\n transform: translateX(-10px) translateY(50px) rotate(30deg);\n}\n\n.button:hover::before {\n transform: rotate(30deg) translateY(10px) translateX(-15px);\n}\n\n.button:hover::after {\n transform: rotate(30deg) translateY(-70px) translateX(-30px);\n}\n\n.button:hover {\n animation: wobel 0.3s ease-in-out;\n}\n\n@keyframes wobel {\n 0% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(1.1);\n }\n\n 60% {\n transform: scale(1.05);\n }\n\n 80% {\n transform: scale(0.85);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"1e2fab","snapshot":null,"tags":null,"title":"button by kheshore","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3362,"cssLen":1873,"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 \n

\n","css":".btn-conteiner {\n display: flex;\n justify-content: center;\n --color-text: #9ee5fa;\n --color-background: #353535;\n --color-outline: #9ee5fa80;\n --color-shadow: #00000080;\n}\n\n.btn-content {\n display: flex;\n align-items: center;\n padding: 0px 3px;\n text-decoration: none;\n font-family: \"Poppins\", sans-serif;\n font-size: 25px;\n color: var(--color-text);\n background: var(--color-background);\n transition: 1s;\n border-radius: 100px;\n box-shadow: 0 0 0.2em 0 var(--color-background);\n}\n\n.btn-content:hover,\n.btn-content:focus {\n transition: 0.5s;\n -webkit-animation: btn-content 1s;\n animation: btn-content 1s;\n outline: 0.1em solid transparent;\n outline-offset: 0.2em;\n box-shadow: 0 0 0.4em 0 var(--color-background);\n}\n\n.btn-content .icon-arrow {\n transition: 0.5s;\n margin-right: 0px;\n transform: scale(0.6);\n}\n\n.btn-content:hover .icon-arrow {\n transition: 0.5s;\n margin-right: 25px;\n}\n\n.icon-arrow {\n width: 20px;\n margin-left: 15px;\n position: relative;\n top: 6%;\n}\n\n/* SVG */\n#arrow-icon-one {\n transition: 0.4s;\n transform: translateX(-60%);\n}\n\n#arrow-icon-two {\n transition: 0.5s;\n transform: translateX(-30%);\n}\n\n.btn-content:hover #arrow-icon-three {\n animation: color_anim 1s infinite 0.2s;\n}\n\n.btn-content:hover #arrow-icon-one {\n transform: translateX(0%);\n animation: color_anim 1s infinite 0.6s;\n}\n\n.btn-content:hover #arrow-icon-two {\n transform: translateX(0%);\n animation: color_anim 1s infinite 0.4s;\n}\n\n/* SVG animations */\n@keyframes color_anim {\n 0% {\n fill: white;\n }\n\n 50% {\n fill: var(--color-background);\n }\n\n 100% {\n fill: #9ee5fa;\n }\n}\n\n/* Button animations */\n@-webkit-keyframes btn-content {\n 0% {\n outline: 0.2em solid var(--color-background);\n outline-offset: 0;\n }\n}\n\n@keyframes btn-content {\n 0% {\n outline: 0.2em solid var(--color-background);\n outline-offset: 0;\n }\n}\n"}]}},"actionData":null,"errors":null}