{"loaderData":{"0":null,"0-3":{"total":7544,"projects":[{"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}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"018f85","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":1736,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".download {\n background: none;\n border: 0;\n box-sizing: border-box;\n margin: 1em;\n padding: 1em 2em;\n color: #039be5;\n background-color: #fff;\n font-size: inherit;\n font-weight: 700;\n position: relative;\n vertical-align: middle;\n border-radius: 4px;\n box-shadow: 0px 20px 30px -15px rgba(0, 0, 0, 0.226);\n cursor: pointer;\n}\n\n.download::before, .download::after {\n box-sizing: inherit;\n border-radius: inherit;\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.download {\n transition: color 0.25s;\n}\n\n.download::before, .download::after {\n border: 2px solid transparent;\n width: 0;\n height: 0;\n}\n\n.download::before {\n top: 0;\n left: 0;\n}\n\n.download::after {\n bottom: 0;\n right: 0;\n}\n\n.download:focus {\n color: #039be5;\n}\n\n.download:focus::before, .download:focus::after {\n width: 100%;\n height: 100%;\n}\n\n.download:focus::before {\n border-top-color: #039be5;\n border-right-color: #039be5;\n transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;\n}\n\n.download:focus::after {\n border-bottom-color: #039be5;\n border-left-color: #039be5;\n transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;\n}\n\n.download .tooltip {\n visibility: hidden;\n width: 120px;\n background-color: #039be5;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 5px 0;\n position: absolute;\n z-index: 1;\n bottom: 120%;\n left: 50%;\n margin-left: -60px;\n}\n\n.download .tooltip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #039be5 transparent transparent transparent;\n}\n\n.download:hover:not(:focus) .tooltip {\n visibility: visible;\n}"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"2b4df5","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":53,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n align-items: center;\n background: #fff;\n border: 0;\n border-radius: 8px;\n box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;\n box-sizing: border-box;\n color: #000;\n display: flex;\n font-family: Phantomsans, sans-serif;\n font-size: 18px;\n justify-content: center;\n line-height: 1em;\n max-width: 100%;\n min-width: 140px;\n padding: 3px;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n white-space: nowrap;\n cursor: pointer;\n transition: all .3s;\n padding-top: 20px;\n padding-bottom: 20px\n}\n\nbutton:hover {\n scale: 0.95\n}\n\nbutton:active {\n scale: 0.9\n}\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"753cdf","snapshot":null,"tags":null,"title":"button by Satwinder04","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":402,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".game-button {\n background-color: #c43f3f;\n color: #fff;\n font-size: 20px;\n font-weight: bold;\n border: none;\n border-radius: 8px;\n padding: 12px 24px;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 0px 4px 0px #a13333;\n transition: all 0.2s ease-in-out;\n}\n\n.game-button:hover {\n background-color: #a13333;\n box-shadow: 0px 2px 0px #751c1c;\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"3071db","snapshot":null,"tags":null,"title":"button by Peary74","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3045,"cssLen":3064,"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","css":"button {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n background: #fd1853;\n font-family: \"Montserrat\", sans-serif;\n overflow: hidden;\n border: none;\n}\n\nbutton:after {\n content: \" \";\n width: 0%;\n height: 100%;\n background: #fff;\n position: absolute;\n transition: all 0.4s ease-in-out;\n right: 0;\n}\n\nbutton:hover::after {\n right: auto;\n left: 0;\n width: 100%;\n}\n\nbutton span {\n text-align: center;\n text-decoration: none;\n width: 100%;\n padding: 18px 25px;\n color: #fffcfd;\n font-size: 1.125em;\n font-weight: 700;\n letter-spacing: 0.3em;\n z-index: 20;\n transition: all 0.3s ease-in-out;\n}\n\nbutton:hover span {\n animation: scaleUp 0.3s ease-in-out;\n color: #fd1853;\n}\n\nbutton:hover {\n animation: scaleUp 0.3s ease-in-out;\n}\n\n@keyframes scaleUp {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.95);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.star-1 {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);\n}\n\n.star-2 {\n position: absolute;\n top: 45%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-3 {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-4 {\n position: absolute;\n top: 20%;\n left: 40%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-5 {\n position: absolute;\n top: 25%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-6 {\n position: absolute;\n top: 5%;\n left: 50%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all .8s ease;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -2%;\n left: 0%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: 34%;\n left: 41.5%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-3 {\n position: absolute;\n top: 55%;\n left: 25%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: 0%;\n left: 55%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 25%;\n left: 85%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 75%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\n"},{"created":"2024-01-22T16:59:55.000Z","isPrivate":0,"projectId":"c97587","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":544,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n Scroll Down\n

","css":".mouse-btn {\n margin: 10px auto;\n width: 40px;\n height: 80px;\n border: 3px solid rgba(122, 122, 124, 0.918);\n border-radius: 20px;\n display: flex;\n}\n\n.mouse-scroll {\n display: block;\n width: 20px;\n height: 20px;\n background: linear-gradient(170deg, rgba(122, 122, 124, 0.918), rgb(123, 124, 124));\n border-radius: 50%;\n margin: auto;\n animation: scrolling13 1s linear infinite;\n}\n\n@keyframes scrolling13 {\n 0% {\n opacity: 0;\n transform: translateY(-20px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(20px);\n }\n}"},{"created":"2024-01-22T16:59:54.000Z","isPrivate":0,"projectId":"429ca9","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T16:59:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":932,"cssLen":2376,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Hover me!\n \n \n \n Explore!\n\n","css":".absolute{position:absolute}.relative{position:relative}.-left-2{left:-0.5rem}.-top-8{top:-2rem}.left-6{left:1.5rem}.top-2{top:0.5rem}.top-2\\.5{top:0.625rem}.z-10{z-index:10}.h-12{height:3rem}.h-32{height:8rem}.w-32{width:8rem}.w-36{width:9rem}.origin-left{transform-origin:left}.rotate-12{--tw-rotate:12deg;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))}.scale-x-0{--tw-scale-x:0;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))}.transform{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))}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.border-none{border-style:none}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-purple-400{--tw-bg-opacity:1;background-color:rgb(192 132 252 / var(--tw-bg-opacity))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-0{opacity:0}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-100{transition-duration:100ms}.duration-1000{transition-duration:1000ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.group:hover .group-hover\\:scale-x-100{--tw-scale-x:1;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\\:opacity-100{opacity:1}.group:hover .group-hover\\:duration-1000{transition-duration:1000ms}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .group-hover\\:duration-700{transition-duration:700ms}"}]}},"actionData":null,"errors":null}