{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"3fced8","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":538,"cssLen":2999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Try Pro\n\n","css":".inline-flex{display:inline-flex}.h-10{height:2.5rem}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.border-0{border-width:0px}.bg-gradient-to-l{background-image:linear-gradient(to left, var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:from-purple-500:hover{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.hover\\:to-blue-600:hover{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:opacity-50:disabled{opacity:0.5}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"93c035","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":763,"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(74, 153, 255);\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 border: 2px solid rgb(1, 111, 255);\n color: rgb(1, 111, 255);\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(190, 218, 255);\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"e6668e","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":1239,"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 background-color: transparent;\n color: #e8e8e8;\n font-size: 17px;\n font-weight: 600;\n border-radius: 10px;\n width: 150px;\n height: 60px;\n border: none;\n text-transform: uppercase;\n cursor: pointer;\n overflow: hidden;\n box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button::before {\n content: \"Hello!\";\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: linear-gradient(135deg,#7b4397,#dc2430 );\n transform: translate(0%,-90%);\n z-index: 99;\n position: relative;\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button::after {\n content: \"Hover me\";\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #333;\n width: 100%;\n height: 100%;\n pointer-events: none;\n transform-origin: bottom;\n transform: translate(0%,-100%);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button:hover::before {\n transform: translate(0%,0%);\n}\n\n.button:hover::after {\n transform: translate(0%,0%);\n}\n\n.button:focus {\n outline: none;\n}\n\n.button:active {\n scale: 0.95;\n}\n\n\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"4699b8","snapshot":null,"tags":null,"title":"button by JkHuger","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":119,"cssLen":1529,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n

","css":".installer {\n width: 200px;\n height: 40px;\n}\n\n.installer label {\n position: absolute;\n height: 40px;\n width: 200px;\n border-radius: 5px;\n overflow: hidden;\n cursor: pointer;\n}\n\n.installer label input {\n display: none;\n}\n\n.installer label span {\n position: absolute;\n height: 40px;\n width: 200px;\n line-height: 40px;\n text-align: center;\n color: #fff;\n background: #3F8EFC;\n border-radius: 5px;\n}\n\n.installer label input:checked ~ span {\n background: #87E544;\n animation: downloadSuccess 3.1s ease;\n}\n\n.installer label span:after {\n content: 'DOWNLOAD';\n position: absolute;\n width: 80%;\n height: 100%;\n left: 10%;\n}\n\n.installer label input:checked ~ span:after {\n content: 'Thank you!';\n animation: downloadState 3s;\n}\n\n.installer label span:before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n opacity: 0;\n background: rgba(255,255,255,.2);\n}\n\n.installer label input:checked ~ span:before {\n animation: downloadProgress 3s cubic-bezier(.67,.13,.1,.81);\n}\n\n@keyframes downloadSuccess {\n 0%, 90% {\n background: #3F8EFC;\n }\n\n 100% {\n background: #87E544;\n }\n}\n\n@keyframes downloadState {\n 0%, 95% {\n content: 'DOWNLOADING...'\n }\n\n 100% {\n content: 'Thank you for download!'\n }\n}\n\n@keyframes downloadProgress {\n 0% {\n width: 5%;\n opacity: 1;\n }\n\n 35% {\n width: 17%;\n }\n\n 64% {\n width: 51%;\n }\n\n 81% {\n width: 70%;\n }\n\n 90% {\n width: 86%;\n opacity: 1;\n }\n\n 100% {\n width: 100%;\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"c310ce","snapshot":null,"tags":null,"title":"button by martinval9","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n color: #B500FF;\n padding: 13px 20px;\n border: 2px solid #B500FF;\n font-size: 17px;\n transition: 0.3s;\n border-radius: 10px;\n font-family: Arial;\n font-weight: 600;\n}\n\n.btn:hover {\n transition: 0.3s;\n background-color: #B500FF;\n margin-top: -20px;\n color: #fff;\n animation-name: button_animation;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n}\n\n.btn:active {\n transform: scale(0.97);\n}\n\n@keyframes button_animation {\n 0% {\n background-color: #B500FF;\n }\n\n 25% {\n background-color: #000000;\n }\n\n 50% {\n background-color: #B500FF;\n }\n\n 75% {\n background-color: #000000;\n }\n\n 100% {\n background-color: #B500FF;\n }\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"a5ee42","snapshot":null,"tags":null,"title":"button by shadowmurphy","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":1124,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button * {\n cursor: pointer;\n}\n\n.button {\n position: relative;\n width: 160px;\n height: 50px;\n background: none;\n border-radius: 8px;\n outline: none;\n font-size: 19px;\n font-family: \"Montserrat\", sans-serif;\n overflow: hidden;\n box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;\n text-decoration: none;\n border: none;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.4s;\n}\n\n.button::before {\n content: '';\n position: absolute;\n width: 200%;\n height: 100%;\n background-image: linear-gradient(to right, #AF40FF, #5B42F3, #006eeb, #42a0f3, #AF40FF);\n background-size: 200% 100%;\n background-position: 100% 0;\n animation: moveGradient 3s linear infinite;\n z-index: -1;\n}\n\n.inner-circle {\n position: absolute;\n width: 94%;\n height: 84%;\n background-color: rgb(2, 3, 20);\n border-radius: 6px;\n opacity: 1;\n transition: opacity 0.2s;\n}\n\n.text {\n z-index: 3;\n color: white;\n cursor: pointer;\n}\n\n@keyframes moveGradient {\n 0% {\n background-position: 100% 0;\n }\n\n 100% {\n background-position: -100% 0;\n }\n}\n\n.button:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"af6596","snapshot":null,"tags":null,"title":"button by wang3616359git","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":85,"cssLen":1498,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".bt {\n border: none;\n user-select: none;\n font-size: 18px;\n color: white;\n text-align: center;\n background-color: #0873bd;\n box-shadow: #cacaca 2px 2px 10px 1px;\n border-radius: 12px;\n height: 60px;\n line-height: 60px;\n width: 155px;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.msg {\n height: 0;\n width: 0;\n border-radius: 2px;\n position: absolute;\n left: 15%;\n top: 25%;\n}\n\n.bt:active {\n transition: all 0.001s ease;\n background-color: #5d9fcd;\n box-shadow: #97989a 0 0 0 0;\n transform: translateX(1px) translateY(1px);\n}\n\n.bt:hover .msg {\n animation: msgRun 2s forwards;\n}\n\n@keyframes msgRun {\n 0% {\n border-top: #d6d6d9 0 solid;\n border-bottom: #f2f2f5 0 solid;\n border-left: #f2f2f5 0 solid;\n border-right: #f2f2f5 0 solid;\n }\n\n 20% {\n border-top: #d6d6d9 14px solid;\n border-bottom: #f2f2f5 14px solid;\n border-left: #f2f2f5 20px solid;\n border-right: #f2f2f5 20px solid;\n }\n\n 25% {\n border-top: #d6d6d9 12px solid;\n border-bottom: #f2f2f5 12px solid;\n border-left: #f2f2f5 18px solid;\n border-right: #f2f2f5 18px solid;\n }\n\n 80% {\n border-top: transparent 12px solid;\n border-bottom: transparent 12px solid;\n border-left: transparent 18px solid;\n border-right: transparent 18px solid;\n }\n\n 100% {\n transform: translateX(150px);\n border-top: transparent 12px solid;\n border-bottom: transparent 12px solid;\n border-left: transparent 18px solid;\n border-right: transparent 18px solid;\n }\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"f79647","snapshot":null,"tags":null,"title":"button by reshades","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":494,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n background-color: #ffffff00;\n color: #fff;\n width: 8.5em;\n height: 2.9em;\n border: #3654ff 0.2em solid;\n border-radius: 33px;\n text-align: right;\n transition: all 0.6s ease;\n}\n\n.button:hover {\n background-color: #3654ff;\n cursor: pointer;\n border-radius: 5px;\n}\n\n.button svg {\n width: 1.6em;\n margin: -0.2em 0.8em 1em;\n position: absolute;\n display: flex;\n transition: all 0.6s ease;\n}\n\n.button:hover svg {\n transform: translateX(5px);\n}\n\n.text {\n margin: 0 1.5em\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"7c6055","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":710,"cssLen":1086,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 200px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 10px;\n padding: 0px 15px;\n background-color: rgb(66, 66, 66);\n border-radius: 10px;\n color: white;\n border: none;\n position: relative;\n cursor: pointer;\n transition-duration: 0.2s;\n}\n.dot {\n position: absolute;\n left: 0;\n top: 0;\n transform: translate(-50%, -50%);\n width: 15px;\n height: 15px;\n background-color: rgb(194, 3, 3);\n border-radius: 100%;\n}\n.bell {\n width: 13px;\n}\n\n.bell path {\n fill: rgb(0, 206, 62);\n}\n\n.arrow {\n position: absolute;\n right: 0;\n width: 30px;\n height: 100%;\n font-size: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button:hover {\n background-color: rgb(77, 77, 77);\n transition-duration: 0.2s;\n}\n\n.button:hover .arrow {\n animation: slide-right 1s infinite;\n}\n/* arrow animation */\n@keyframes slide-right {\n 0% {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(-5px);\n }\n}\n\n.button:active {\n transform: translate(1px, 1px);\n transition-duration: 0.2s;\n}\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"e51443","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":444,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 1px solid black;\n padding: 12px 30px 12px 30px;\n border-radius: 30px;\n background-color: #a2ff4a;\n font-weight: bolder;\n font-size: 15px;\n box-shadow: 0px 0px 1px;\n transform: all 2s esase;\n transition-duration: .3s;\n}\n\nbutton:hover {\n transform: translateY(-10px);\n box-shadow: 0px 7px 1px rgb(0, 0, 0);\n border: 1px solid black;\n}\n\nbutton:active {\n transform: translateY(10px);\n box-shadow: 0px 0px 1px;\n}\n \n\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"788a01","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":726,"cssLen":922,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":"button {\n background: transparent;\n position: relative;\n padding: 5px 15px;\n display: flex;\n align-items: center;\n font-size: 17px;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n border: 1px solid #0163E0;\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: #0163E0;\n transition: color 0.3s 0.1s ease-out;\n text-align: center;\n}\n\nbutton svg {\n fill: #0163E0;\n height: 25px;\n width: 25px;\n}\n\nbutton span {\n margin: 10px;\n}\n\nbutton::before {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n content: '';\n border-radius: 50%;\n display: block;\n width: 20em;\n height: 20em;\n left: -5em;\n text-align: center;\n transition: box-shadow 0.5s ease-out;\n z-index: -1;\n}\n\nbutton:hover {\n color: #fff;\n border: 1px solid #0163E0;\n}\n\nbutton:hover svg {\n fill: currentColor;\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em #0163E0;\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"3e24af","snapshot":null,"tags":null,"title":"button by omar-alghaish","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":72,"cssLen":805,"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: 50px;\n box-shadow: 0 5px 25px rgba(0, 0,0, .25);\n border: none;\n}\n\nbutton span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n color: #fff;\n background: #002faf;\n display: flex;\n justify-content: center;\n align-items: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-size: 17px;\n}\n\nbutton span:nth-child(2) {\n background: #fff;\n color: #002ba0;\n overflow: hidden;\n z-index: 2;\n transition: .5s;\n clip-path: polygon(50% 0%, 100% 0%,100% 100%,50% 100%,50% 53%);\n}\n\nbutton span:nth-child(2):hover {\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, 0 50%);\n}\n\nbutton span:nth-child(1):hover ~ span:nth-child(2) {\n clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%, 100%50%);\n}"}]}},"actionData":null,"errors":null}