{"loaderData":{"0":null,"0-3":{"total":7434,"projects":[{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"f8b441","snapshot":null,"tags":null,"title":"button by mi-series","updated":"2024-01-22T17:00:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":540,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 170px;\n height: 60px;\n color: #fff;\n background: #000;\n font-size: 17px;\n text-decoration: none;\n margin: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 0px 0 #000;\n transition: 0.5s;\n position: relative;\n}\n\nbutton:hover {\n box-shadow: 8px 10px 0 #000;\n background: transparent;\n border: 2px solid #000;\n color: #000;\n margin-top: 5px;\n}\n\nbutton span {\n margin-left: 10px;\n width: 0;\n overflow: hidden;\n transition: 0.4s;\n}\n\nbutton:hover span {\n width: 30px;\n}"},{"created":"2024-01-22T17:00:15.000Z","isPrivate":0,"projectId":"cd7fd0","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":760,"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: white;\n color: rgb(53, 144, 0);\n border: 2px solid rgb(53, 144, 0);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-8px, -9px);\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-22T17:00:13.000Z","isPrivate":0,"projectId":"29803a","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1161,"cssLen":2284,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n Your Name\n \n See my profile!\n \n\n","css":".absolute{position:absolute}.relative{position:relative}.top-16{top:4rem}.z-10{z-index:10}.inline-block{display:inline-block}.flex{display:flex}.h-8{height:2rem}.w-8{width:2rem}.items-center{align-items:center}.justify-start{justify-content:flex-start}.gap-2{gap:0.5rem}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:0.5rem}.border-l-2{border-left-width:2px}.bg-sky-600{--tw-bg-opacity:1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.bg-sky-700{--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.fill-neutral-50{fill:#fafafa}.p-2{padding:0.5rem}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.pr-6{padding-right:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-0{opacity:0}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:-top-1::before{content:var(--tw-content);top:-0.25rem}.before\\:left-20::before{content:var(--tw-content);left:5rem}.before\\:h-3::before{content:var(--tw-content);height:0.75rem}.before\\:w-3::before{content:var(--tw-content);width:0.75rem}.before\\:rotate-45::before{content:var(--tw-content);--tw-rotate:45deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\\:bg-sky-600::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.hover\\:bg-sky-600:hover{--tw-bg-opacity:1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.group:hover .group-hover\\:opacity-100{opacity:1}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"5b2908","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":629,"cssLen":987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BG {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #ff0000;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n border: 1px solid rgba(255, 110, 110, 0.466);\n background-color: rgba(219, 219, 219, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"2b5d95","snapshot":null,"tags":null,"title":"button by SmookyDev","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":419,"cssLen":1907,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".relative{position:relative}.z-20{z-index:20}.overflow-hidden{overflow:hidden}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-0::after{content:var(--tw-content);bottom:0px}.after\\:left-0::after{content:var(--tw-content);left:0px}.after\\:z-\\[-20\\]::after{content:var(--tw-content);z-index:-20}.after\\:h-1::after{content:var(--tw-content);height:0.25rem}.after\\:w-full::after{content:var(--tw-content);width:100%}.after\\:rounded-t-full::after{content:var(--tw-content);border-top-left-radius:9999px;border-top-right-radius:9999px}.after\\:bg-\\[\\#abd373\\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(171 211 115 / var(--tw-bg-opacity))}.after\\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\\:text-\\[\\#778464\\]:hover{--tw-text-opacity:1;color:rgb(119 132 100 / var(--tw-text-opacity))}.hover\\:transition-all:hover{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:duration-500:hover{transition-duration:500ms}.after\\:hover\\:h-\\[200\\%\\]:hover::after{content:var(--tw-content);height:200%}.after\\:hover\\:transition-all:hover::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:hover\\:duration-500:hover::after{content:var(--tw-content);transition-duration:500ms}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"43e6c6","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":502,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me!","css":"/* ============================ */\na {\n text-decoration: none;\n}\n/* ============================ */\n.menu__link {\n color: #fff;\n line-height: 2;\n position: relative;\n}\n\n.menu__link::before {\n content: '';\n width: 100%;\n height: 2px;\n border-radius: 2px;\n background-color: #fff;\n position: absolute;\n bottom: -.5rem;\n left: 0;\n transition: transform .4s, opacity .4s;\n opacity: 0;\n}\n\n.menu__link:hover::before {\n transform: translateY(-.25rem);\n opacity: 1;\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"71e35e","snapshot":null,"tags":null,"title":"button by JamesAchiver","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":633,"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: 0.5em 1.2em;\n font-size: 1.8em;\n font-family: Calibri;\n background-color: #5b04bf;\n border: none;\n color: #FFF;\n cursor: pointer;\n align-items: center;\n box-shadow: inset 0px 38px 25px 0 #5b04bf, inset 0 0px 0px 0px #084748a8, inset 0 69px 0px 0px #d74589af;\n border-radius: 0.6em;\n}\n\n.button:hover {\n padding: 0.7em 1.4em;\n transition: 0.4s ease-in-out;\n box-shadow: inset 0px 38px 25px 5px #5b04bf, inset 10px 40px 10px 0px #084748a8, inset 0 69px 0px 0px #31b0d7de;\n}\n\n.button:active {\n box-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.3);\n transform: translate(0.1em , 0.1em);\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"7c255f","snapshot":null,"tags":null,"title":"button by devestter","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":532,"cssLen":503,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 12px 19px;\n border: none;\n color: rgb(16, 52, 170);\n cursor: pointer;\n background-color: rgb(190, 219, 253);\n border-radius: 7px;\n font-weight: bold;\n transition: 0.5s;\n display: flex;\n gap: 4px;\n align-items: center;\n font-size: 13px;\n box-shadow: rgba(150, 143, 143, 0.2) 0px 2px 8px 0px;\n}\n\n.button:hover {\n background-color: rgb(164, 206, 253);\n box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;\n}\n\n.saveicon {\n width: 17px;\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"583b58","snapshot":null,"tags":null,"title":"button by prashantj510","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":298,"cssLen":833,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: none;\n border: none;\n padding: 15px 15px;\n border-radius: 10px;\n}\n\nbutton:hover {\n background: rgba(170, 170, 170, 0.062);\n transition: 0.5s;\n}\n\nbutton svg {\n color: #fff;\n}\n\nbutton:active {\n animation-name: shake;\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n}\n\n@keyframes shake {\n 0% {\n transform: translateX(0);\n }\n\n 10% {\n transform: translateX(-10px);\n }\n\n 20% {\n transform: translateX(10px);\n }\n\n 30% {\n transform: translateX(-10px);\n }\n\n 40% {\n transform: translateX(10px);\n }\n\n 50% {\n transform: translateX(-10px);\n }\n\n 60% {\n transform: translateX(10px);\n }\n\n 70% {\n transform: translateX(-10px);\n }\n\n 80% {\n transform: translateX(10px);\n }\n\n 90% {\n transform: translateX(-10px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"6704fc","snapshot":null,"tags":null,"title":"button by isfandiyor132","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":550,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #ffffff;\n outline: none;\n height: 50px;\n width: 150px;\n border: none;\n text-decoration: none;\n background-image: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);\n}\n\n.btn:hover {\n animation: rotate 0.4s linear infinite;\n}\n\n@keyframes rotate {\n 100% {\n filter: hue-rotate(-360deg)\n }\n}\n\n.btn span {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 42px;\n width: 142px;\n background: #222222;\n font-size: 18px;\n}"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"c0ef21","snapshot":null,"tags":null,"title":"button by SujitAdroja","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":526,"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 background: none;\n border: 2px solid black;\n font-size: 1.2rem;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n transition: all 0.3s;\n}\n.btn::before {\n content: \"\";\n height: 0%;\n width: 0%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n z-index: -1;\n position: absolute;\n background-color: #494958;\n transition: all 0.3s;\n}\n.btn:hover {\n border: 2px solid #32323c;\n color: white;\n}\n.btn:hover::before {\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 0.3rem;\n}\n"},{"created":"2024-01-22T17:00:13.000Z","isPrivate":0,"projectId":"1289d9","snapshot":null,"tags":null,"title":"button by Saiyed-Tanvir","updated":"2024-01-22T17:00:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":147,"cssLen":629,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n BUTTON\n

","css":".btn {\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n\n.sides {\n transition: all 0.07s;\n cursor: pointer;\n}\n\n.top {\n background: linear-gradient(259.35deg, #FF6B00 0%, #BD00FF 100%);\n height: 2cm;\n width: 4cm;\n transform: rotateX(60deg);\n font-weight: bolder;\n padding: 0.5cm 1cm;\n color: white;\n}\n\n.front {\n background: linear-gradient(280.65deg, #BD5000 0%, #8C00BD 100%);\n height: 2cm;\n width: 4cm;\n transform: translateY(-38px) rotateX(-60deg);\n}\n\n.btn:active .top {\n transform: rotateX(60deg) translateZ(0px);\n}\n\n.btn:active .front {\n height: 0.1cm;\n transform: rotateX(-60deg) translateZ(-26px);\n}"}]}},"actionData":null,"errors":null}