{"loaderData":{"0":null,"0-3":{"total":7433,"projects":[{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"4f2dba","snapshot":null,"tags":null,"title":"button by TomMussard","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":599,"cssLen":1104,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background-color: rgb(255, 65, 65);\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sign svg {\n width: 17px;\n}\n\n.sign svg path {\n fill: white;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: white;\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: .3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\n transition-duration: .3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: .3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: .3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px ,2px);\n}"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"0ca60c","snapshot":null,"tags":null,"title":"button by r7chardgh","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":933,"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: 1em 1.5em;\n transform: rotateX(40deg)rotateZ(40deg);\n transform-style: preserve-3d;\n border: .1em solid black;\n transition: all 150ms;\n background-color: rgb(233, 211, 184);\n cursor: pointer;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n width: 2em;\n height: 99%;\n border: .1em solid black;\n top: -.15em;\n right: 0;\n transform-origin: right;\n transform: rotateY(-90deg);\n transition: all 150ms;\n background-color: rgb(155, 139, 120);\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 2em;\n border: .1em solid black;\n bottom: 0;\n left: -.15em;\n transform-origin: bottom;\n transform: rotateX(90deg);\n transition: all 150ms;\n background-color: rgb(199, 179, 155);\n}\n\n.button:active {\n transform: rotateX(40deg)rotateZ(40deg) translateZ(-1em);\n}\n\n.button:active::before {\n width: 0;\n}\n\n.button:active::after {\n height: 0;\n}\n"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"08f923","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":521,"cssLen":903,"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 #0078E8;\n background-color: #0082FC;\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(30px);\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: #0078E8;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: #fff;\n}\n\n.button:hover {\n background: #0078E8;\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: #006cd0;\n}\n\n.button:active {\n border: 1px solid #006cd0;\n}"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"fbfd5c","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":945,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n border-radius: 8px;\n height: 40px;\n border: none;\n background: white;\n color: #222;\n padding: 15px;\n box-shadow: 0 0.7065919983928324px 0.7065919983928324px -0.625px #00000026,\n 0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025,\n 0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023,\n 0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020,\n 0 13.646761411524492px 13.646761411524492px -3.125px #0000001b,\n 0 30px 30px -3.75px #0000000d;\n font-weight: bold;\n font-family: Montserrat;\n cursor: pointer;\n display: flex;\n align-items: center;\n transition: 150ms ease-in-out;\n}\n\n.button:active {\n scale: 0.95;\n background: black;\n color: white;\n box-shadow: rgba(0, 0, 0, 0.26) 0px 0.637473px 1.14745px -1.125px,\n rgba(0, 0, 0, 0.24) 0px 1.93094px 3.4757px -2.25px,\n rgba(0, 0, 0, 0.192) 0px 5.10423px 9.18761px -3.375px,\n rgba(0, 0, 0, 0.03) 0px 16px 28.8px -4.5px;\n}\n"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"48d427","snapshot":null,"tags":null,"title":"button by ahmedgamal-hub","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":77,"cssLen":1117,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".glow-on-hover {\n width: 220px;\n height: 50px;\n border: none;\n outline: none;\n color: #fff;\n background: #111;\n cursor: pointer;\n position: relative;\n z-index: 0;\n border-radius: 10px;\n}\n\n.glow-on-hover:before {\n content: '';\n background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);\n position: absolute;\n top: -2px;\n left: -2px;\n background-size: 400%;\n z-index: -1;\n filter: blur(5px);\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n animation: glowing 20s linear infinite;\n opacity: 0;\n transition: opacity .3s ease-in-out;\n border-radius: 10px;\n}\n\n.glow-on-hover:active {\n color: #000\n}\n\n.glow-on-hover:active:after {\n background: transparent;\n}\n\n.glow-on-hover:hover:before {\n opacity: 1;\n}\n\n.glow-on-hover:after {\n z-index: -1;\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: #111;\n left: 0;\n top: 0;\n border-radius: 10px;\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"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"fb4910","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":1734,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.right-20 {\n right: 5rem\n}\n\n.top-3 {\n top: 0.75rem\n}\n\n.z-10 {\n z-index: 10\n}\n\n.flex {\n display: flex\n}\n\n.h-14 {\n height: 3.5rem\n}\n\n.h-16 {\n height: 4rem\n}\n\n.h-24 {\n height: 6rem\n}\n\n.h-32 {\n height: 8rem\n}\n\n.h-40 {\n height: 10rem\n}\n\n.w-14 {\n width: 3.5rem\n}\n\n.w-24 {\n width: 6rem\n}\n\n.w-32 {\n width: 8rem\n}\n\n.w-40 {\n width: 10rem\n}\n\n.w-64 {\n width: 16rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.bg-sky-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(2 132 199 / var(--tw-bg-opacity))\n}\n\n.bg-sky-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / var(--tw-bg-opacity))\n}\n\n.bg-sky-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(7 89 133 / var(--tw-bg-opacity))\n}\n\n.bg-sky-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(12 74 110 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.font-extrabold {\n font-weight: 800\n}\n\n.text-sky-50 {\n --tw-text-opacity: 1;\n color: rgb(240 249 255 / var(--tw-text-opacity))\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.group:hover .group-hover\\:-right-12 {\n right: -3rem\n}\n\n.group:hover .group-hover\\:top-12 {\n top: 3rem\n}\n\n.group:hover .group-hover\\:scale-150 {\n --tw-scale-x: 1.5;\n --tw-scale-y: 1.5;\n 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))\n}\n\n.group:hover .group-hover\\:opacity-50 {\n opacity: 0.5\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"a07ad1","snapshot":null,"tags":null,"title":"button by chethan025","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":280,"cssLen":480,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 38px;\n height: 82px;\n padding: 2px;\n border: 1px solid #474747;\n border-radius: 50px;\n background: rgba(141, 141, 141, 0.18);\n transition: all 0.3s ease-in-out;\n transform: rotate(180deg);\n}\n\n.svg {\n width: 22px;\n height: 62px;\n transform: rotate(180deg);\n}\n\n.button:hover {\n transform: scale(-1.2);\n}\n\n.button:focus {\n height: 0px;\n width: 0px;\n padding: 0px;\n border: 0px;\n}\n\n.button:focus > .svg {\n display: none;\n height: 0px;\n}\n \n \n \n "},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"aa69a0","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1288,"cssLen":707,"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 Download form\n App store\n \n\n","css":".playstore-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #000;\n border-radius: 9999px;\n background-color: rgba(0, 0, 0, 1);\n padding: 0.625rem 1.5rem;\n text-align: center;\n color: rgba(255, 255, 255, 1);\n outline: 0;\n transition: all 0.2s ease;\n text-decoration: none;\n}\n\n.playstore-button:hover {\n background-color: transparent;\n color: rgba(0, 0, 0, 1);\n}\n\n.icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n\n.texts {\n margin-left: 1rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n line-height: 1;\n}\n\n.text-1 {\n margin-bottom: 0.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.text-2 {\n font-weight: 600;\n}\n"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"7fa4b5","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":992,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n --purple: #9B7EDA;\n font-size: 18px;\n padding: 0.8em 3em;\n letter-spacing: 0.08em;\n position: relative;\n font-family: inherit;\n border-radius: 0.6em;\n overflow: hidden;\n transition: all 0.3s;\n line-height: 1.4em;\n border: 2px solid var(--purple);\n background: linear-gradient(to right, rgba(155, 126, 218, 0.1) 1%, transparent 40%, transparent 60%, rgba(155, 126, 218, 0.1) 100%);\n color: var(--purple);\n box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.4), 0 0 9px 3px rgba(155, 126, 218, 0.1);\n}\n\nbutton:hover {\n color: #BFA3F3;\n box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.6), 0 0 9px 3px rgba(155, 126, 218, 0.2);\n}\n\nbutton:before {\n content: \"\";\n position: absolute;\n left: -4em;\n width: 4em;\n height: 100%;\n top: 0;\n transition: transform .4s ease-in-out;\n background: linear-gradient(to right, transparent 1%, rgba(155, 126, 218, 0.1) 40%, rgba(155, 126, 218, 0.1) 60%, transparent 100%);\n}\n\nbutton:hover:before {\n transform: translateX(15em);\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"666d77","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":801,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n.menu__button {\n min-width: 62px;\n height: 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 16px;\n border: 1px solid #fff;\n background-color: transparent;\n position: relative;\n}\n\n.menu__button::before {\n content: '';\n width: 100%;\n height: 0;\n background-color: #fff;\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -1;\n transition: all .4s;\n}\n\n.menu__button:hover::before {\n height: 100%;\n top: 0;\n}\n\n.menu__button span {\n color: #fff;\n line-height: 1;\n transition: color .4s;\n}\n\n.menu__button:hover span {\n color: #000;\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"361094","snapshot":null,"tags":null,"title":"button by Prayag321","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":570,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".comic-button {\n display: inline-block;\n padding: 10px 20px;\n font-size: 24px;\n font-weight: bold;\n text-align: center;\n text-decoration: none;\n color: #fff;\n background-color: #ff5252;\n border: 2px solid #000;\n border-radius: 10px;\n box-shadow: 5px 5px 0px #000;\n transition: all 0.3s ease;\n scale: 0.9;\n}\n\n.comic-button:hover {\n background-color: #fff;\n color: #ff5252;\n border: 2px solid #ff5252;\n box-shadow: 5px 5px 0px #ff5252;\n scale: 1;\n}\n\n.comic-button:active {\n background-color: #fcf414;\n box-shadow: none;\n transform: translateY(4px);\n}\n"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"157463","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":674,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n.menu__icon {\n width: 2rem;\n height: 2rem;\n padding: .25rem;\n backdrop-filter: saturate(180%) blur(20px);\n background-color: rgb(29, 29, 31, .7);\n border: solid 1px rgba(66,66,69,0.7);\n}\n\n.menu__icon::before {\n display: block;\n content: \"+\";\n color: rgb(245, 245, 247);\n font-size: 1.125rem;\n font-weight: 400;\n transition: transform .3s ease-out;\n transform-origin: center;\n}\n\n.menu__icon:hover::before {\n transform: rotate(45deg) scale(1.08);\n}"}]}},"actionData":null,"errors":null}