{"loaderData":{"0":null,"0-2":{"total":7089,"projects":[{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"ab0c15","snapshot":null,"tags":null,"title":"button by Iliasman2","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":591,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".designer-btn {\n display: inline-block;\n padding: 14px 40px;\n font-size: 20px;\n font-weight: bold;\n text-align: center;\n border-radius: 30px;\n cursor: pointer;\n border: 2px solid black;\n transition: all 0.3s ease;\n background: linear-gradient(to bottom, #b2b5b3, #a5a7a6);\n color: rgb(57, 53, 53);\n}\n\n.designer-btn:hover {\n border: 2px solid rgb(109, 107, 107);\n color: #a5a7a6;\n box-shadow: 0 5px #666;\n transform: translateY(-5px);\n background: linear-gradient(to bottom, #2e2f2e, #323433);\n}\n\n.designer-btn:focus,\n.designer-btn:active {\n transform: translateY(4px);\n}\n \n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"8df557","snapshot":null,"tags":null,"title":"button by newrocker2468","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":791,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button1 {\n background-color: white;\n font-weight: bold;\n font-size: 1em;\n border: none;\n border-radius: 5px;\n padding: 1.2em;\n color: rgb(0, 0, 0);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all 500ms;\n z-index: 99;\n}\n\n.button1::after {\n content: \"\";\n position: absolute;\n width: 25px;\n height: 25px;\n border-radius: 20px;\n bottom: -30px;\n left: 45px;\n background-color: #5affc0;\n z-index: -99;\n transition: all 500ms;\n}\n\n.button1:hover::after {\n width: 120px;\n height: 60px;\n border-radius: 10px;\n transition: all 500ms;\n bottom: -1px;\n left: -1px;\n}\n\n.button1:hover {\n border-radius: 20px;\n box-shadow: 0 0 100px 20px #5affc0;\n}\n\n.button1:active {\n transform: translateY(10px);\n}\n\n.button1:focus {\n border: 5px solid #a0fad8;\n}\n"},{"created":"2024-01-22T17:00:08.000Z","isPrivate":0,"projectId":"a7cc82","snapshot":null,"tags":null,"title":"button by themrsami","updated":"2024-01-22T17:00:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":1306,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Click me\n\n","css":".rounded-full{border-radius:9999px}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247 / var(--tw-bg-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(126 34 206 / var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\\:bg-purple-900:active{--tw-bg-opacity:1;background-color:rgb(88 28 135 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T17:00:08.000Z","isPrivate":0,"projectId":"16b159","snapshot":null,"tags":null,"title":"button by santhoshsj-dev","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":1020,"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: 24px 64px;\n border-radius: 50px;\n color: #fafafa;\n text-transform: uppercase;\n font-weight: 900;\n letter-spacing: 2px;\n background-color: #212121;\n border: solid 1px #fafafa4d;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.button .button-text {\n position: relative;\n z-index: 2;\n}\n\n.button .fill-container {\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n padding-bottom: 100%;\n transform: translateY(-50%) rotate(180deg);\n}\n\n.button .fill-container::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: blue;\n border-radius: 50px;\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n transform: translateY(-100%);\n}\n\n.button:hover {\n border-color: blue;\n transform: translateY(-4px);\n}\n\n.button:hover .fill-container {\n transform: translateY(-50%) rotate(0);\n}\n\n.button:hover .fill-container::after {\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"e8ac1c","snapshot":null,"tags":null,"title":"button by Diox221","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":100,"cssLen":615,"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 display: inline-block;\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 5rem;\n font-size: 1rem;\n font-weight: 600;\n color: #fff;\n background-color: #333;\n cursor: pointer;\n overflow: hidden;\n z-index: 1;\n}\n\n.spacex-btn {\n background-color: #005288;\n}\n\n.btn-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 100%;\n height: 100%;\n background-color: #ffffff;\n opacity: 0.3;\n z-index: -1;\n transition: transform 0.3s ease-in-out;\n}\n\n.spacex-btn:hover .btn-bg {\n transform: translate(-50%, -50%) scale(2);\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"b1fc94","snapshot":null,"tags":null,"title":"button by aadium","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 15px 32px;\n font-size: 20px;\n color: white;\n border: none;\n border-radius: 5em;\n background-size: 200% 100%;\n background-image: linear-gradient(145deg, #ff53eb, #4b4bff, #5de7ff);\n box-shadow: 3px 3px 10px 2px #4b4bff, -3px -3px 10px 2px #ff53eb;\n transition: 0.5s;\n}\n\nbutton:hover {\n background-position: 99%;\n box-shadow: 3px 3px 10px 2px #5de7ff, -3px -3px 10px 2px #4b4bff;\n}\n\nbutton:active {\n transform: scale(0.8) rotate(5deg);\n box-shadow: 3px 3px 15px 3px #5de7ff, -3px -3px 15px 3px #4b4bff;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"15ca81","snapshot":null,"tags":null,"title":"button by megasteve19","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":553,"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 background-color: seagreen;\n color: white;\n font-size: 1.15rem;\n font-weight: 500;\n padding: 0.8rem 2rem;\n border-radius: 0.5rem;\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n cursor: pointer;\n transform: translate(1) translate(0, 0);\n transition: transform 225ms, box-shadow 225ms;\n}\n\nbutton:hover {\n transform: scale(1.05) translate(0, -0.15rem);\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);\n}\n\nbutton:active {\n transform: scale(1) translate(0, 0.15rem);\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"774c3e","snapshot":null,"tags":null,"title":"button by Dashrath-Sharma","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":835,"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 outline: none;\n font-size: 17px;\n padding: 1em 2em;\n position: relative;\n color: #14213d;\n background: #f1f1f1;\n display: grid;\n font-weight: 700;\n place-items: center;\n transition: color 350ms linear 650ms;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n overflow: hidden;\n z-index: 1;\n}\n\nbutton:hover {\n color: #fca311;\n}\n\nbutton::before,\nbutton::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n z-index: -1;\n width: 0;\n height: 6%;\n}\n\nbutton::before {\n background: #fca311;\n transition: width 350ms, height 350ms linear 650ms;\n}\n\nbutton:hover::before {\n width: 100%;\n height: 100%;\n}\n\nbutton:after {\n background: #14213d;\n transition: width 350ms linear 175ms, height 350ms linear 650ms;\n}\n\nbutton:hover::after {\n width: 95%;\n height: 100%;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"0e216f","snapshot":null,"tags":null,"title":"button by mostafabazyar","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":646,"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 margin: 1rem;\n z-index: 2;\n border-radius: 8px;\n appearance: none;\n padding: 1em 2em;\n transition: all 0.2s;\n}\n\nbutton {\n padding: 1.2rem;\n position: relative;\n z-index: 1;\n}\n\nbutton::before {\n content: \"6\";\n position: absolute;\n display: flex;\n top: -0.75em;\n right: -0.75em;\n height: 1.8em;\n width: 1.8em;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background-color: red;\n color: white;\n z-index: 999;\n transition: all 0.2s;\n}\n\nbutton:hover {\n border-radius: 3px;\n border-color: red;\n}\n\nbutton:hover::before {\n height: 2em;\n width: 2em;\n font-size: 1.5em;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"7cdc2c","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":79,"cssLen":2090,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n font-size: 2em;\n padding: 10px 20px;\n background-color: transparent;\n transition: all 0.2s ease-out;\n border: none;\n}\n\n.button__span {\n color: #131313;\n transition: all 0.2s ease-out;\n background-color: #e7e5e4;\n letter-spacing: .15em;\n text-shadow: 1px -1px 0 #767676, \n -1px 2px 1px #737272, \n -2px 4px 1px #767474, \n -3px 6px 1px #787777, \n -4px 8px 1px #7b7a7a, \n -5px 10px 1px #7f7d7d, \n -6px 12px 1px #828181, \n -7px 14px 1px #868585, \n -8px 16px 1px #8b8a89, \n -9px 18px 1px #8f8e8d, \n -10px 20px 1px #949392, \n -11px 22px 1px #999897, \n -12px 24px 1px #9e9c9c, \n -13px 26px 1px #a3a1a1, \n -14px 28px 1px #a8a6a6, \n -15px 30px 1px #adabab, \n -16px 32px 1px #b2b1b0, \n -17px 34px 1px #b7b6b5, \n -18px 36px 1px #bcbbba, \n -19px 38px 1px #c1bfbf, \n -20px 40px 1px #c6c4c4, \n -21px 42px 1px #cbc9c8, \n -22px 44px 1px #cfcdcd, \n -23px 46px 1px #d4d2d1, \n -24px 48px 1px #d8d6d5, \n -25px 50px 1px #dbdad9, \n -26px 52px 1px #dfdddc, \n -27px 54px 1px #e2e0df, \n -28px 56px 1px #e4e3e2;\n}\n\n.button__span:hover {\n text-shadow: -1px -1px 0 #767676, \n 1px 2px 1px #737272, \n 2px 4px 1px #767474, \n 3px 6px 1px #787777, \n 4px 8px 1px #7b7a7a, \n 5px 10px 1px #7f7d7d, \n 6px 12px 1px #828181, \n 7px 14px 1px #868585, \n 8px 16px 1px #8b8a89, \n 9px 18px 1px #8f8e8d, \n 10px 20px 1px #949392, \n 11px 22px 1px #999897, \n 12px 24px 1px #9e9c9c, \n 13px 26px 1px #a3a1a1, \n 14px 28px 1px #a8a6a6, \n 15px 30px 1px #adabab, \n 16px 32px 1px #b2b1b0, \n 17px 34px 1px #b7b6b5, \n 18px 36px 1px #bcbbba, \n 19px 38px 1px #c1bfbf, \n 20px 40px 1px #c6c4c4, \n 21px 42px 1px #cbc9c8, \n 22px 44px 1px #cfcdcd, \n 23px 46px 1px #d4d2d1, \n 24px 48px 1px #d8d6d5, \n 25px 50px 1px #dbdad9, \n 26px 52px 1px #dfdddc, \n 27px 54px 1px #e2e0df, \n 28px 56px 1px #e4e3e2;\n}\n\n.button:active .button__span {\n text-shadow: none;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"b0a280","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":578,"cssLen":1233,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n background: linear-gradient(-50deg,rgb(39, 107, 255),rgb(112, 186, 255),rgb(39, 107, 255));\n background-size: 250%;\n background-position: left;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n position: relative;\n transition-duration: .5s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);\n}\n\n.logoIcon {\n fill: white;\n}\n\n.tooltip {\n position: absolute;\n top: -20px;\n opacity: 0;\n background: linear-gradient(to right,rgb(39, 107, 255),rgb(108, 184, 255));\n color: white;\n padding: 5px 10px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: .2s;\n pointer-events: none;\n letter-spacing: 0.5px;\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 10px;\n background: linear-gradient(45deg,rgb(39, 107, 255),rgb(108, 184, 255));\n background-size: 1000%;\n background-position: center;\n transform: rotate(45deg);\n bottom: -15%;\n transition-duration: .3s;\n}\n\n.Btn:hover .tooltip {\n top: -50px;\n opacity: 1;\n transition-duration: .3s;\n}\n\n.Btn:hover {\n background-position: right;\n transition-duration: .5s;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"65c610","snapshot":null,"tags":null,"title":"button by HarryProCW","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":962,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".rounded-full{border-radius:9999px}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-orange-200{--tw-gradient-from:#fed7aa var(--tw-gradient-from-position);--tw-gradient-to:rgb(254 215 170 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-red-500{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}@keyframes pulse{50%{opacity:.5}}.hover\\:animate-pulse:hover{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}"}]}},"actionData":null,"errors":null}