{"loaderData":{"0":null,"0-2":{"total":7067,"projects":[{"created":"2024-01-22T17:00:33.000Z","isPrivate":0,"projectId":"13ad9e","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":630,"cssLen":749,"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","css":".cursor-pointer {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-blue-400 {\n stroke: #60a5fa;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:fill-blue-800 {\n fill: #1e40af;\n}\n.group:active .group-active\\:fill-blue-600 {\n fill: #2563eb;\n}\n.group:active .group-active\\:stroke-blue-200 {\n stroke: #bfdbfe;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"},{"created":"2024-01-22T17:00:33.000Z","isPrivate":0,"projectId":"87b381","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":1182,"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.secondary-button {\n min-width: 111px;\n height: 52px;\n border-radius: 36px;\n background: #fff;\n padding: 16px 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #000;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: -0.32px;\n transition: color .2s ease-in-out;\n position: relative;\n}\n\n.secondary-button::before,\n.secondary-button::after {\n content: '';\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border-radius: 40px;\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n transform: translate(-50%, -50%);\n}\n\n.secondary-button::before {\n background: linear-gradient(88deg, #c3aab2 0.66%, #9ec 57.2%, #80c0c8 75.87%, #4b8bfa 98.72%);\n opacity: 0;\n transition: opacity .2s ease-in-out;\n}\n\n.secondary-button::after {\n background: #000;\n transition: opacity .2s ease-in-out;\n}\n\n.secondary-button:hover::before {\n opacity: 1;\n}\n\n.secondary-button:hover::after {\n opacity: 0;\n}"},{"created":"2024-01-22T17:00:33.000Z","isPrivate":0,"projectId":"1dbd0a","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":451,"cssLen":939,"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: #181818;\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 background-color: rgba(156, 156, 156, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:33.000Z","isPrivate":0,"projectId":"e2707d","snapshot":null,"tags":null,"title":"button by kiru2741","updated":"2024-01-22T17:00:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":519,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: 2px solid black;\n background-color: white;\n color: white;\n position: relative;\n letter-spacing: 1px;\n}\n\nbutton::before {\n content: 'Button';\n /*Button's value/text-content */\n position: absolute;\n top: -14%;\n left: 7%;\n background-color: black;\n width: 100%;\n height: 100%;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.15s ease-in-out;\n font-weight: bold;\n}\n\nbutton:hover::before {\n top: 0;\n left: 0;\n}"},{"created":"2024-01-22T17:00:33.000Z","isPrivate":0,"projectId":"5beb89","snapshot":null,"tags":null,"title":"button by VD232004","updated":"2024-01-22T17:00:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":492,"cssLen":1884,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".unique-button {\n display: flex;\n align-items: center;\n position: relative;\n width: 180px;\n height: 60px;\n padding: 15px 30px;\n font-size: 18px;\n text-decoration: none;\n color: #fff;\n background-color: #a634db;\n border: none;\n border-radius: 10px;\n overflow: hidden;\n cursor: pointer;\n transition: 0.3s all ease-in-out;\n}\n\n.unique-button:hover {\n transition: 0.3s all ease-in-out;\n box-shadow: 5px 10px 30px #a634db;\n}\n\n.unique-button span {\n display: block;\n margin-left: 0.3em;\n transition: all 0.3s ease-in-out;\n}\n\n.unique-button:hover span {\n transform: translateX(7em);\n}\n\n.unique-button:hover .svg-wrap {\n animation: fly-1 0.6s ease-in-out infinite alternate;\n z-index: 1;\n}\n\n.unique-button svg {\n display: block;\n transform-origin: center center;\n transition: transform 0.3s ease-in-out;\n}\n\n.unique-button:hover svg {\n transform: translateX(2.5em) rotate(45deg) scale(1.2);\n}\n\n.unique-button:active {\n transform: scale(0.95);\n}\n\n@keyframes fly-1 {\n from {\n transform: translateY(0.1em);\n }\n\n to {\n transform: translateY(-0.1em);\n }\n}\n\n.unique-button::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 80%;\n border-bottom-left-radius: 60px;\n border-top-right-radius: 60px;\n border-top-left-radius: 20px;\n border-bottom-right-radius: 20px;\n background-color: #2c3e50;\n transition: all 0.2s ease-in-out;\n}\n\n.unique-button:hover::before {\n width: 100%;\n}\n\n.unique-button::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80%;\n height: 0;\n border-bottom-left-radius: 20px;\n border-top-right-radius: 20px;\n border-top-left-radius: 60px;\n border-bottom-right-radius: 60px;\n background-color: #2c3e50;\n transition: all 0.3s ease-in-out;\n}\n\n.unique-button:hover::after {\n height: 100%;\n}\n"},{"created":"2024-01-22T17:00:33.000Z","isPrivate":0,"projectId":"123f3a","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":545,"cssLen":1539,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".faq-button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: none;\n background-color: #ffe53b;\n background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);\n position: relative;\n}\n.faq-button svg {\n height: 1.5em;\n fill: white;\n}\n.faq-button:hover svg {\n animation: jello-vertical 0.7s both;\n}\n@keyframes jello-vertical {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n 30% {\n transform: scale3d(0.75, 1.25, 1);\n }\n 40% {\n transform: scale3d(1.25, 0.75, 1);\n }\n 50% {\n transform: scale3d(0.85, 1.15, 1);\n }\n 65% {\n transform: scale3d(1.05, 0.95, 1);\n }\n 75% {\n transform: scale3d(0.95, 1.05, 1);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n\n.tooltip {\n position: absolute;\n top: -20px;\n opacity: 0;\n background-color: #ffe53b;\n background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);\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: 0.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-color: #ff2525;\n background-size: 1000%;\n background-position: center;\n transform: rotate(45deg);\n bottom: -15%;\n transition-duration: 0.3s;\n}\n\n.faq-button:hover .tooltip {\n top: -40px;\n opacity: 1;\n transition-duration: 0.3s;\n}\n"},{"created":"2024-01-22T17:00:33.000Z","isPrivate":0,"projectId":"55fe3b","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1072,"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 padding: 15px 32px;\n font-size: 17px;\n font-weight: bold;\n color: #fff;\n background-color: #000;\n border: none;\n border-radius: 50px;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.button:before,\n.button:after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 50px;\n opacity: 0.3;\n pointer-events: none;\n transition: all 0.3s ease-in-out;\n}\n\n.button:before {\n left: -100%;\n background: linear-gradient(90deg, rgba(0, 136, 255, 0.8), rgba(255, 0, 170, 0.8), rgba(0, 136, 255, 0.8));\n z-index: -1;\n}\n\n.button:hover:before {\n left: 0;\n}\n\n.button:after {\n right: -100%;\n background: linear-gradient(270deg, rgba(0, 136, 255, 0.8), rgba(255, 0, 170, 0.8), rgba(0, 136, 255, 0.8));\n z-index: -1;\n}\n\n.button:hover:after {\n right: 0;\n}\n\n.button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.button:active {\n transform: translateY(1px);\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"b3bd4f","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":467,"cssLen":649,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 12px;\n gap: 2px;\n height: 40px;\n width: 85px;\n border: none;\n background: #a549da3d;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.lable {\n line-height: 22px;\n font-size: 19px;\n color: #A649DA;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button:hover {\n background: #a549da62;\n}\n\n.button:hover .svg-icon {\n animation: lr 1s linear infinite;\n}\n\n@keyframes lr {\n 0% {\n transform: translateX(0);\n }\n\n 25% {\n transform: translateX(-1px);\n }\n\n 75% {\n transform: translateX(1px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"96940d","snapshot":null,"tags":null,"title":"button by aagam147","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":676,"cssLen":733,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 9px 12px;\n gap: 8px;\n height: 45px;\n width: 150px;\n border: none;\n background: rgb(74, 180, 50);\n border-radius: 50px;\n cursor: pointer;\n position: relative;\n}\n\n.lable {\n line-height: 22px;\n font-size: 17px;\n color: #fff;\n margin-left: 20px;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button .span {\n border-radius: 50%;\n background-color: rgb(48, 129, 29);\n padding: 10px;\n position: absolute;\n left: 0;\n}\n\n.button:hover {\n background: rgb(48, 129, 29);\n}\n\n.button:hover .svg-icon {\n animation: slope 0.8s linear infinite;\n}\n\n@keyframes slope {\n 0% {\n }\n\n 50% {\n transform: rotate(15deg);\n }\n\n 100% {\n }\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"fdaca5","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":613,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --color: black;\n font-family: inherit;\n display: inline-block;\n width: 6em;\n height: 2.6em;\n line-height: 2.5em;\n overflow: hidden;\n margin: 20px;\n font-size: 17px;\n z-index: 1;\n color: var(--color);\n border: 2px solid var(--color);\n border-radius: 6px;\n position: relative;\n}\n\nbutton::before {\n position: absolute;\n content: \"\";\n background: var(--color);\n width: 150px;\n height: 200px;\n z-index: -1;\n border-radius: 50%;\n}\n\nbutton:hover {\n color: white;\n}\n\nbutton:before {\n top: 100%;\n left: 100%;\n transition: .3s all;\n}\n\nbutton:hover::before {\n top: -30px;\n left: -30px;\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"4e2ecc","snapshot":null,"tags":null,"title":"button by hamoode-taha-04","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":800,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".ui-btn {\n cursor: pointer;\n border-radius: 5px;\n color: rgb(219, 218, 218);\n border-style: solid;\n background-color: transparent;\n border-color: rgb(219, 218, 218);\n width: 120px;\n height: 40px;\n transition: 0.2s ease;\n text-transform: uppercase;\n border-width: 2px;\n font-weight: 500;\n font-size: 18px;\n letter-spacing: 2px;\n}\n.ui-btn:hover {\n color: rgb(247, 247, 247);\n background-color: rgb(42, 145, 73);\n border-color: rgb(42, 145, 73);\n text-shadow: 0 0 50px white, 0 0 20px white, 0 0 15px white;\n box-shadow: 0 0 50px rgb(42, 145, 73), 0 0 30px rgb(42, 145, 73),\n 0 0 60px rgb(42, 145, 73), 0 0 120px rgb(42, 145, 73);\n font-size: 20px;\n width: 130px;\n height: 50px;\n letter-spacing: 3px;\n}\n.ui-btn:active {\n width: 115px;\n height: 38px;\n letter-spacing: 0px;\n}\n"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"7e3af2","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":1277,"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 display: flex;\n align-items: center;\n justify-content: center;\n color: #e8e8e8;\n background-color: #212121;\n width: 70px;\n height: 70px;\n font-size: 24px;\n text-transform: uppercase;\n border: 2px solid #212121;\n border-radius: 50%;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.15),\n 2px 2px 2px rgba(0, 0, 0, 0.1),\n -3px -3px 2px rgba(255, 255, 255, 0.05),\n -2px -2px 1px rgba(255, 255, 255, 0.05);\n overflow: hidden;\n cursor: pointer;\n}\n\n.button .span {\n position: relative;\n z-index: 2;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n background-color: #e8e8e8;\n width: 150%;\n height: 150%;\n left: 0%;\n bottom: 0%;\n transform: translate(-100%, 100%) rotate(45deg);\n border-radius: 15px;\n}\n\n.button:hover::before {\n animation: shakeBack 0.6s forwards 0.6s;\n}\n\n.button:hover .span {\n scale: 1.2;\n}\n\n.button:hover {\n box-shadow: none;\n}\n\n.button:active {\n scale: 0.95;\n}\n\n@keyframes shakeBack {\n 0% {\n transform: translate(-100%, 100%) rotate(45deg);\n }\n\n 50% {\n transform: translate(15%, -15%) rotate(45deg);\n }\n\n 100% {\n transform: translate(-10%, 10%) rotate(45deg);\n }\n}\n"}]}},"actionData":null,"errors":null}