{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"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"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"c6cf17","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":60,"cssLen":936,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n --button_radius: 0.75em;\n --button_color: #e8e8e8;\n --button_outline_color: #000000;\n --shadow-color: rgba(0, 0, 0, 0.2);\n --highlight-color: rgba(255, 255, 255, 0.2);\n font-size: 17px;\n font-weight: bold;\n border: none;\n border-radius: var(--button_radius);\n background: linear-gradient(\n to bottom right,\n var(--highlight-color),\n var(--shadow-color)\n );\n box-shadow: 6px 6px 16px var(--shadow-color),\n -6px -6px 16px var(--highlight-color);\n cursor: pointer;\n}\n\n.button_top {\n display: block;\n box-sizing: border-box;\n border: 2px solid var(--button_outline_color);\n border-radius: var(--button_radius);\n padding: 0.75em 1.5em;\n background: var(--button_color);\n color: var(--button_outline_color);\n transform: translateY(-0.2em);\n transition: transform 0.1s ease;\n}\n\nbutton:hover .button_top {\n transform: translateY(-0.33em);\n}\n\nbutton:active .button_top {\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"07da58","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":628,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --color: #8540f5;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all .5s;\n border: none;\n background-color: transparent;\n}\n\n.btn div {\n letter-spacing: 2px;\n font-weight: bold;\n background: var(--color);\n border-radius: 2rem;\n color: white;\n padding: 1rem;\n}\n\n.btn::before {\n content: '';\n z-index: -1;\n background-color: var(--color);\n border: 2px solid white;\n border-radius: 2rem;\n width: 110%;\n height: 100%;\n position: absolute;\n transform: rotate(10deg);\n transition: .5s;\n opacity: 0.2;\n}\n\n.btn:hover {\n cursor: pointer;\n filter: brightness(1.2);\n transform: scale(1.1);\n}\n\n.btn:hover::before {\n transform: rotate(0deg);\n opacity: 1;\n}\n\n.btn svg {\n transform: translateX(-200%);\n transition: .5s;\n width: 0;\n opacity: 0;\n}\n\n.btn:hover svg {\n width: 25px;\n transform: translateX(0%);\n opacity: 1;\n}\n\n.btn:active {\n filter: brightness(1.4);\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"2bc0e5","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":1325,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-55,\n.btn-55 *,\n.btn-55 :after,\n.btn-55 :before,\n.btn-55:after,\n.btn-55:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-55 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n}\n\n.btn-55:disabled {\n cursor: default;\n}\n\n.btn-55:-moz-focusring {\n outline: auto;\n}\n\n.btn-55 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-55 [hidden] {\n display: none;\n}\n\n.btn-55 {\n background: linear-gradient(90deg, blue, red);\n border-radius: 999px;\n box-sizing: border-box;\n color: #000;\n display: block;\n font-weight: 900;\n overflow: hidden;\n padding: 1.8rem 5rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-55 span {\n background: #1e293b;\n border-radius: 999px;\n color: #fff;\n display: grid;\n inset: 5px;\n place-items: center;\n position: absolute;\n transition: background 0.3s;\n}\n\n.btn-55:hover span {\n background: none;\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"769a83","snapshot":null,"tags":null,"title":"button by bociKond","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":184,"cssLen":1643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --white: #e8e8e8;\n --border-clr: #fff;\n --button-bg-clr: #151515;\n display: grid;\n grid-template-rows: 80% 20%;\n background-color: var(--button-bg-clr);\n border-width: 10px 3px 3px 3px;\n border-color: var(--border-clr);\n border-style: solid;\n font-family: sans-serif;\n font-weight: bolder;\n font-size: 1.5rem;\n cursor: pointer;\n transition: 350ms ease-in-out;\n}\n\nbutton:hover {\n --border-clr: #f55c1b;\n transform: translate(-7px, -7px);\n}\n\nbutton:hover .top::before {\n filter: saturate(1);\n opacity: 1;\n}\n\nbutton:hover .top::after {\n opacity: 0;\n}\n\n.top {\n color: var(--white);\n /* background-color: white; */\n margin: 0.75rem 0.5rem;\n padding: 0.5rem 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n isolation: isolate;\n z-index: 1;\n}\n\n.top::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: #f55c1b;\n background: linear-gradient(0deg, #f55c1b 0%, #ffffff 100%);\n filter: saturate(0);\n z-index: -2;\n transition: 350ms ease-in-out;\n opacity: 0;\n}\n\n.top .before {\n position: absolute;\n inset: 2px;\n z-index: -1;\n background-color: var(--button-bg-clr);\n}\n\n.top::after {\n content: \"\";\n position: absolute;\n inset: 0px;\n background: var(--button-bg-clr);\n filter: saturate(0);\n z-index: -1;\n transition: 350ms ease-in-out;\n border: 2px solid var(--white);\n transition: 350ms ease-in-out;\n}\n\n.bottom {\n background: repeating-conic-gradient(\n from 45deg,\n #616161 0% 25%,\n #3f3f3f 0% 50%\n );\n background-size: 16px 16px;\n background-color: #3f3f3f;\n background-position: center;\n width: 100%;\n height: 100%;\n}"}]}},"actionData":null,"errors":null}