{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"1d68d4","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1073,"cssLen":2029,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-14{height:3.5rem}.h-16{height:4rem}.h-24{height:6rem}.h-32{height:8rem}.h-40{height:10rem}.h-48{height:12rem}.w-16{width:4rem}.w-24{width:6rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-56{width:14rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233 / var(--tw-bg-opacity))}.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))}.bg-sky-800{--tw-bg-opacity:1;background-color:rgb(7 89 133 / var(--tw-bg-opacity))}.bg-sky-900{--tw-bg-opacity:1;background-color:rgb(12 74 110 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.font-extrabold{font-weight:800}.text-sky-50{--tw-text-opacity:1;color:rgb(240 249 255 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.delay-150{transition-delay:150ms}.duration-500{transition-duration:500ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:border-sky-600:hover{--tw-border-opacity:1;border-color:rgb(2 132 199 / var(--tw-border-opacity))}.group:hover .group-hover\\:scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;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))}.group:hover .group-hover\\:delay-100{transition-delay:100ms}.group:hover .group-hover\\:delay-150{transition-delay:150ms}.group:hover .group-hover\\:delay-200{transition-delay:200ms}.group:hover .group-hover\\:delay-300{transition-delay:300ms}.group:hover .group-hover\\:delay-75{transition-delay:75ms}"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"b37ff1","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1607,"cssLen":1058,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".reward-btn {\n width: 120px;\n height: 40px;\n background-color: #101218;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s;\n}\n.IconContainer {\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n.IconContainer svg {\n width: 40%;\n z-index: 3;\n}\n.box-top {\n transition: all 0.3s;\n}\n.text {\n width: 70px;\n height: 100%;\n font-size: 13px;\n color: #6a8ef6;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-weight: 600;\n}\n.reward-btn:hover .IconContainer .box-top {\n transform: translateY(-5px);\n}\n.reward-btn:hover {\n background-color: #202531;\n}\n.reward-btn:hover .coin {\n transform: translateY(-5px);\n transition-delay: 0.2s;\n}\n.coin {\n width: 25%;\n height: 25%;\n background-color: #e4d61a;\n position: absolute;\n border-radius: 50%;\n transition: all 0.3s;\n z-index: 1;\n border: 2px solid #ffe956;\n margin-top: 4px;\n}\n"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"1e0979","snapshot":null,"tags":null,"title":"button by Codecite","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":458,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n transition: all 0.3s ease-in-out;\n font-family: \"Dosis\", sans-serif;\n}\n\n.btn {\n width: 150px;\n height: 60px;\n border-radius: 50px;\n background-image: linear-gradient(135deg, #feb692 0%, #ea5455 100%);\n box-shadow: 0 20px 30px -6px rgba(238, 103, 97, 0.5);\n outline: none;\n cursor: pointer;\n border: none;\n font-size: 24px;\n color: white;\n}\n\n.btn:hover {\n transform: translateY(3px);\n box-shadow: none;\n}\n\n.btn:active {\n opacity: 0.5;\n}"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"5c582f","snapshot":null,"tags":null,"title":"button by Allyhere","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":1085,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-donate {\n --clr-font-main: hsla(0 0% 20% / 100);\n --btn-bg-1: hsla(194 100% 69% / 1);\n --btn-bg-2: hsla(217 100% 56% / 1);\n --btn-bg-color: hsla(360 100% 100% / 1);\n --radii: 0.5em;\n cursor: pointer;\n padding: 0.9em 1.4em;\n min-width: 120px;\n min-height: 44px;\n font-size: var(--size, 1rem);\n font-family: \"Segoe UI\", system-ui, sans-serif;\n font-weight: 500;\n transition: 0.8s;\n background-size: 280% auto;\n background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);\n border: none;\n border-radius: var(--radii);\n color: var(--btn-bg-color);\n box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);\n}\n\n.btn-donate:hover {\n background-position: right top;\n}\n\n.btn-donate:is(:focus, :focus-visible, :active) {\n outline: none;\n box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .btn-donate {\n transition: linear;\n }\n}\n"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"972164","snapshot":null,"tags":null,"title":"button by Li-Deheng","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3147,"cssLen":1893,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".btn-conteiner {\n display: flex;\n justify-content: center;\n --color-text: #ffffff;\n --color-background: #ff135a;\n --color-outline: #ff145b80;\n --color-shadow: #00000080;\n}\n\n.btn-content {\n display: flex;\n align-items: center;\n padding: 5px 30px;\n text-decoration: none;\n font-family: 'Poppins', sans-serif;\n font-weight: 600;\n font-size: 30px;\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, .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: white;\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}"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"303ac0","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":389,"cssLen":1079,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".bookmarkBtn {\n width: 100px;\n height: 40px;\n border-radius: 40px;\n border: 1px solid rgba(255, 255, 255, 0.349);\n background-color: rgb(12, 12, 12);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: 0.3s;\n overflow: hidden;\n}\n\n.IconContainer {\n width: 30px;\n height: 30px;\n background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255));\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n z-index: 2;\n transition-duration: 0.3s;\n}\n\n.icon {\n border-radius: 1px;\n}\n\n.text {\n height: 100%;\n width: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n z-index: 1;\n transition-duration: 0.3s;\n font-size: 1.04em;\n}\n\n.bookmarkBtn:hover .IconContainer {\n width: 90px;\n transition-duration: 0.3s;\n}\n\n.bookmarkBtn:hover .text {\n transform: translate(10px);\n width: 0;\n font-size: 0;\n transition-duration: 0.3s;\n}\n\n.bookmarkBtn:active {\n transform: scale(0.95);\n transition-duration: 0.3s;\n}\n"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"4885f7","snapshot":null,"tags":null,"title":"button by elijahgummer","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":104,"cssLen":1293,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".golden-button {\n touch-action: manipulation;\n display: inline-block;\n outline: none;\n font-family: inherit;\n font-size: 1em;\n box-sizing: border-box;\n border: none;\n border-radius: 0.3em;\n height: 2.75em;\n line-height: 2.5em;\n text-transform: uppercase;\n padding: 0 1em;\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),\n inset 0 -2px 5px 1px rgba(139, 66, 8, 1),\n inset 0 -1px 1px 3px rgba(250, 227, 133, 1);\n background-image: linear-gradient(\n 160deg,\n #a54e07,\n #b47e11,\n #fef1a2,\n #bc881b,\n #a54e07\n );\n border: 1px solid #a55d07;\n color: rgb(120, 50, 5);\n text-shadow: 0 2px 2px rgba(250, 227, 133, 1);\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n background-size: 100% 100%;\n background-position: center;\n}\n\n.golden-button:focus,\n.golden-button:hover {\n background-size: 150% 150%;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),\n inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);\n border: 1px solid rgba(165, 93, 7, 0.6);\n color: rgba(120, 50, 5, 0.8);\n}\n\n.golden-button:active {\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),\n inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);\n}\n"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"9ca3b1","snapshot":null,"tags":null,"title":"button by Cevorob","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":817,"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 height: 50px;\n padding: 0 30px;\n border: 2px solid #000;\n background: #e8e8e8;\n user-select: none;\n white-space: nowrap;\n transition: all .05s linear;\n font-family: inherit;\n}\n\nbutton:before, button:after {\n content: \"\";\n position: absolute;\n background: #e8e8e8;\n transition: all .2s linear;\n}\n\nbutton:before {\n width: calc(100% + 6px);\n height: calc(100% - 16px);\n top: 8px;\n left: -3px;\n}\n\nbutton:after {\n width: calc(100% - 16px);\n height: calc(100% + 6px);\n top: -3px;\n left: 8px;\n}\n\nbutton:hover {\n cursor: crosshair;\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\nbutton:hover:before {\n height: calc(100% - 32px);\n top: 16px;\n}\n\nbutton:hover:after {\n width: calc(100% - 32px);\n left: 16px;\n}\n\nbutton span {\n font-size: 15px;\n z-index: 3;\n position: relative;\n font-weight: 600;\n}"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"606d66","snapshot":null,"tags":null,"title":"button by Gautammsharma","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":563,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","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 cursor: pointer;\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}\n\n.comic-button:active {\n background-color: #fcf414;\n box-shadow: none;\n transform: translateY(4px);\n}\n"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"8b58f3","snapshot":null,"tags":null,"title":"button by Pradeepsaranbishnoi","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":156,"cssLen":2049,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n ☼\n

","css":".toggle {\n display: inline-block;\n}\n\n.toggle {\n position: relative;\n height: 100px;\n width: 100px;\n}\n\n.toggle:before {\n box-shadow: 0;\n border-radius: 84.5px;\n background: #fff;\n position: absolute;\n margin-left: -36px;\n margin-top: -36px;\n opacity: 0.2;\n height: 72px;\n width: 72px;\n left: 50%;\n top: 50%;\n}\n\n.toogle input:checked~.label {\n color: rgba(255,0,0,0.8);\n}\n\n.toggle .button {\n transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);\n box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);\n border-radius: 68.8px;\n position: absolute;\n background: #eaeaea;\n margin-left: -34.4px;\n margin-top: -34.4px;\n display: block;\n height: 68.8px;\n width: 68.8px;\n left: 50%;\n top: 50%;\n}\n\n.toggle .label {\n transition: color 300ms ease-out;\n line-height: 101px;\n text-align: center;\n position: absolute;\n font-weight: 700;\n font-size: 28px;\n display: block;\n opacity: 0.9;\n height: 100%;\n width: 100%;\n color: rgba(0, 0, 0, 0.9);\n}\n\n.toggle input {\n opacity: 0;\n position: absolute;\n cursor: pointer;\n z-index: 1;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n}\n\n.toggle input:active ~ .button {\n filter: blur(0.5px);\n box-shadow: 0 12px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);\n}\n\n.toggle input:active ~ .label {\n font-size: 26px;\n color: rgba(0, 0, 0, 0.45);\n}\n\n.toggle input:checked ~ .button {\n filter: blur(0.5px);\n box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);\n}\n\n.toggle input:checked ~ .label {\n color: rgba(0, 0, 0, 0.8);\n}\n"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"5eb34b","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":323,"cssLen":222,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n background: none;\n border: none;\n padding: 15px 15px;\n border-radius: 10px;\n cursor: pointer;\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"},{"created":"2024-01-22T16:59:48.000Z","isPrivate":0,"projectId":"e1bf72","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T16:59:48.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":417,"cssLen":885,"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 width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 1px solid #34974d;\n background-color: #3aa856;\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: #34974d;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 30px;\n stroke: #fff;\n}\n\n.button:hover {\n background: #34974d;\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: #2e8644;\n}\n\n.button:active {\n border: 1px solid #2e8644;\n}"}]}},"actionData":null,"errors":null}