{"loaderData":{"0":null,"0-3":{"total":7556,"projects":[{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"f2ec7a","snapshot":null,"tags":null,"title":"button by Jedi-hongbin","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":770,"cssLen":544,"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 height: 3em;\n width: 100px;\n align-items: center;\n justify-content: center;\n background-color: #eeeeee4b;\n border-radius: 3px;\n letter-spacing: 1px;\n transition: all 0.2s linear;\n cursor: pointer;\n border: none;\n background: #fff;\n}\n\nbutton > svg {\n margin-right: 5px;\n margin-left: 5px;\n font-size: 20px;\n transition: all 0.4s ease-in;\n}\n\nbutton:hover > svg {\n font-size: 1.2em;\n transform: translateX(-5px);\n}\n\nbutton:hover {\n box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;\n transform: translateY(-2px);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"45f8cb","snapshot":null,"tags":null,"title":"button by Damithkumara","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":1007,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 0.9em 1.8em;\n text-transform: uppercase;\n text-decoration: none;\n letter-spacing: 4px;\n color: transparent;\n border: 3px solid #ff0;\n font-size: 14px;\n position: relative;\n font-family: inherit;\n background: transparent;\n cursor: pointer;\n}\n\nbutton::before {\n content: \"button\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #363636;\n color: #ff0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n}\n\nbutton:hover::before {\n left: 100%;\n transform: scale(0) rotateY(360deg);\n opacity: 0;\n}\n\nbutton::after {\n content: \"button\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background-color: #363636;\n color: #ff0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n transform: scale(0) rotateY(0deg);\n opacity: 0;\n}\n\nbutton:hover::after {\n left: 0;\n transform: scale(1) rotateY(360deg);\n opacity: 1;\n}\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"74b265","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":914,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".animated-button {\n position: relative;\n display: inline-block;\n padding: 12px 24px;\n border: none;\n font-size: 16px;\n background-color: inherit;\n border-radius: 100px;\n font-weight: 600;\n color: #ffffff40;\n box-shadow: 0 0 0 2px #ffffff20;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.animated-button span:last-child {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n background-color: #2196F3;\n border-radius: 50%;\n opacity: 0;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.animated-button span:first-child {\n position: relative;\n z-index: 1;\n}\n\n.animated-button:hover {\n box-shadow: 0 0 0 5px #2195f360;\n color: #ffffff;\n}\n\n.animated-button:active {\n scale: 0.95;\n}\n\n.animated-button:hover span:last-child {\n width: 150px;\n height: 150px;\n opacity: 1;\n}\n\n\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"0501fe","snapshot":null,"tags":null,"title":"button by krlozCJ","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":31,"cssLen":326,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: none;\n outline: none;\n background-color: #6c5ce7;\n padding: 10px 20px;\n font-size: 12px;\n font-weight: 700;\n color: #fff;\n border-radius: 5px;\n transition: all ease 0.1s;\n box-shadow: 0px 5px 0px 0px #a29bfe;\n}\n\nbutton:active {\n transform: translateY(5px);\n box-shadow: 0px 0px 0px 0px #a29bfe;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"2b797c","snapshot":null,"tags":null,"title":"button by fabiodevbr","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1647,"cssLen":1192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Click to see what happens

","css":"button {\n background-color: #F2F7FA;\n width: 100px;\n height: 30px;\n border: none;\n border-radius: 10px;\n font-weight: 600;\n overflow: hidden;\n transition-duration: 700ms;\n}\n\nbutton span:first-child {\n color: #0E418F;\n position: absolute;\n transform: translate(-50%, -50%)\n}\n\nbutton span:last-child {\n position: absolute;\n color: #B5CCF3;\n opacity: 0;\n transform: translateY(100%) translateX(-50%);\n height: 14px;\n line-height: 13px;\n}\n\nbutton:focus {\n background-color: #0E418F;\n width: 120px;\n height: 40px;\n transition-delay: 100ms;\n transition-duration: 500ms;\n}\n\nbutton:focus span:first-child {\n color: #B5CCF3;\n transform: translateX(-50%) translateY(-150%);\n opacity: 0;\n transition-duration: 500ms;\n}\n\nbutton:focus span:last-child {\n transform: translateX(-50%) translateY(-50%);\n opacity: 1;\n transition-delay: 300ms;\n transition-duration: 500ms;\n}\n\nbutton:focus:end {\n background-color: #FFFFFF;\n width: 120px;\n height: 40px;\n transition-duration: 900ms;\n}\n\n.centralize {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n.description {\n margin-top: 10px;\n color: #B5CCF3;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"e80861","snapshot":null,"tags":null,"title":"button by Custyyyy","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":63,"cssLen":1173,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button-name {\n align-items: center;\n appearance: none;\n background-color: #FCFCFD;\n border-radius: 4px;\n border-width: 0;\n box-shadow: rgba(45, 35, 66, 0.2) 0 2px 4px,rgba(45, 35, 66, 0.15) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;\n box-sizing: border-box;\n color: #36395A;\n cursor: pointer;\n display: inline-flex;\n font-family: \"JetBrains Mono\",monospace;\n height: 48px;\n justify-content: center;\n line-height: 1;\n list-style: none;\n overflow: hidden;\n padding-left: 16px;\n padding-right: 16px;\n position: relative;\n text-align: left;\n text-decoration: none;\n transition: box-shadow .15s,transform .15s;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n white-space: nowrap;\n will-change: box-shadow,transform;\n font-size: 18px;\n}\n\n.button-name:focus {\n box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;\n}\n\n.button-name:hover {\n box-shadow: rgba(45, 35, 66, 0.3) 0 4px 8px, rgba(45, 35, 66, 0.2) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;\n transform: translateY(-2px);\n}\n\n.button-name:active {\n box-shadow: #D6D6E7 0 3px 7px inset;\n transform: translateY(2px);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"06f940","snapshot":null,"tags":null,"title":"button by Praashoo7","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4155,"cssLen":1982,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".main {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.up {\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n}\n\n.down {\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n}\n\n.card1 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 90px 5px 5px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.instagram {\n margin-top: 1.5em;\n margin-left: 1.2em;\n fill: #cc39a4;\n}\n\n.card2 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 90px 5px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.twitter {\n margin-top: 1.5em;\n margin-left: -.9em;\n fill: #03A9F4;\n}\n\n.card3 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 5px 5px 90px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.github {\n margin-top: -.6em;\n margin-left: 1.2em;\n}\n\n.card4 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 5px 90px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.discord {\n margin-top: -.9em;\n margin-left: -1.2em;\n fill: #8c9eff;\n}\n\n.card1:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #cc39a4;\n}\n\n.card1:hover .instagram {\n fill: white;\n}\n\n.card2:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #03A9F4;\n}\n\n.card2:hover .twitter {\n fill: white;\n}\n\n.card3:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: black;\n}\n\n.card3:hover .github {\n fill: white;\n}\n\n.card4:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #8c9eff;\n}\n\n.card4:hover .discord {\n fill: white;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"3e9d6e","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":177,"cssLen":1801,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Buy Tickets\n \n \n","css":".fancy {\n background-color: transparent;\n border: 2px solid #000;\n border-radius: 0;\n box-sizing: border-box;\n color: #fff;\n cursor: pointer;\n display: inline-block;\n float: right;\n font-weight: 700;\n letter-spacing: 0.05em;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 1.25em 2em;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-transform: none;\n transition: all 0.3s ease-in-out;\n user-select: none;\n font-size: 13px;\n}\n\n.fancy::before {\n content: \" \";\n width: 1.5625rem;\n height: 2px;\n background: black;\n top: 50%;\n left: 1.5em;\n position: absolute;\n transform: translateY(-50%);\n transform-origin: center;\n transition: background 0.3s linear, width 0.3s linear;\n}\n\n.fancy .text {\n font-size: 1.125em;\n line-height: 1.33333em;\n padding-left: 2em;\n display: block;\n text-align: left;\n transition: all 0.3s ease-in-out;\n text-transform: uppercase;\n text-decoration: none;\n color: black;\n}\n\n.fancy .top-key {\n height: 2px;\n width: 1.5625rem;\n top: -2px;\n left: 0.625rem;\n position: absolute;\n background: #e8e8e8;\n transition: width 0.5s ease-out, left 0.3s ease-out;\n}\n\n.fancy .bottom-key-1 {\n height: 2px;\n width: 1.5625rem;\n right: 1.875rem;\n bottom: -2px;\n position: absolute;\n background: #e8e8e8;\n transition: width 0.5s ease-out, right 0.3s ease-out;\n}\n\n.fancy .bottom-key-2 {\n height: 2px;\n width: 0.625rem;\n right: 0.625rem;\n bottom: -2px;\n position: absolute;\n background: #e8e8e8;\n transition: width 0.5s ease-out, right 0.3s ease-out;\n}\n\n.fancy:hover {\n color: white;\n background: black;\n}\n\n.fancy:hover::before {\n width: 0.9375rem;\n background: white;\n}\n\n.fancy:hover .text {\n color: white;\n padding-left: 1.5em;\n}\n\n.fancy:hover .top-key {\n left: -2px;\n width: 0px;\n}\n\n.fancy:hover .bottom-key-1,\n .fancy:hover .bottom-key-2 {\n right: 0;\n width: 0;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"1f7df5","snapshot":null,"tags":null,"title":"button by nikk7007","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":1014,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --color: #00A97F;\n --color2: rgb(10, 25, 30);\n padding: 0.8em 1.75em;\n background-color: transparent;\n border-radius: 6px;\n border: .3px solid var(--color);\n transition: .5s;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n z-index: 1;\n font-weight: 300;\n font-size: 17px;\n font-family: 'Roboto', 'Segoe UI', sans-serif;\n text-transform: uppercase;\n color: var(--color);\n}\n\n.btn::after, .btn::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n transform: skew(90deg) translate(-50%, -50%);\n position: absolute;\n inset: 50%;\n left: 25%;\n z-index: -1;\n transition: .5s ease-out;\n background-color: var(--color);\n}\n\n.btn::before {\n top: -50%;\n left: -25%;\n transform: skew(90deg) rotate(180deg) translate(-50%, -50%);\n}\n\n.btn:hover::before {\n transform: skew(45deg) rotate(180deg) translate(-50%, -50%);\n}\n\n.btn:hover::after {\n transform: skew(45deg) translate(-50%, -50%);\n}\n\n.btn:hover {\n color: var(--color2);\n}\n\n.btn:active {\n filter: brightness(.7);\n transform: scale(.98);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"2dd758","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":505,"cssLen":814,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 130px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(15, 15, 15);\n border: none;\n color: white;\n font-weight: 600;\n gap: 8px;\n cursor: pointer;\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n}\n\n.svgIcon {\n width: 16px;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.Btn::before {\n width: 130px;\n height: 130px;\n position: absolute;\n content: \"\";\n background-color: white;\n border-radius: 50%;\n left: -100%;\n top: 0;\n transition-duration: .3s;\n mix-blend-mode: difference;\n}\n\n.Btn:hover::before {\n transition-duration: .3s;\n transform: translate(100%,-50%);\n border-radius: 0;\n}\n\n.Btn:active {\n transform: translate(5px,5px);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"56e5aa","snapshot":"https://s1.qingting.work/runjs/6973cef098d1.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by faizanullah1999","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":2054,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".primary-button {\n font-family: 'Ropa Sans', sans-serif;\n /* font-family: 'Valorant', sans-serif; */\n color: white;\n cursor: pointer;\n font-size: 13px;\n font-weight: bold;\n letter-spacing: 0.05rem;\n border: 1px solid #0E1822;\n padding: 0.8rem 2.1rem;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 /* fill: %230E1822; */ %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A\");\n background-color: #0E1822;\n background-size: 200%;\n background-position: 200%;\n background-repeat: no-repeat;\n transition: 0.3s ease-in-out;\n transition-property: background-position, border, color;\n position: relative;\n z-index: 1;\n}\n\n.primary-button:hover {\n border: 1px solid #FF4655;\n color: white;\n background-position: 40%;\n}\n\n.primary-button:before {\n content: \"\";\n position: absolute;\n background-color: #0E1822;\n width: 0.2rem;\n height: 0.2rem;\n top: -1px;\n left: -1px;\n transition: background-color 0.15s ease-in-out;\n}\n\n.primary-button:hover:before {\n background-color: white;\n}\n\n.primary-button:hover:after {\n background-color: white;\n}\n\n.primary-button:after {\n content: \"\";\n position: absolute;\n background-color: #FF4655;\n width: 0.3rem;\n height: 0.3rem;\n bottom: -1px;\n right: -1px;\n transition: background-color 0.15s ease-in-out;\n}\n\n.button-borders {\n position: relative;\n width: fit-content;\n height: fit-content;\n}\n\n.button-borders:before {\n content: \"\";\n position: absolute;\n width: calc(100% + 0.5em);\n height: 50%;\n left: -0.3em;\n top: -0.3em;\n border: 1px solid #0E1822;\n border-bottom: 0px;\n /* opacity: 0.3; */\n}\n\n.button-borders:after {\n content: \"\";\n position: absolute;\n width: calc(100% + 0.5em);\n height: 50%;\n left: -0.3em;\n bottom: -0.3em;\n border: 1px solid #0E1822;\n border-top: 0px;\n /* opacity: 0.3; */\n z-index: 0;\n}\n\n.shape {\n fill: #0E1822;\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"759f7e","snapshot":"https://s1.qingting.work/runjs/c4fdca2db83b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Gaurav-WebDev","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1068,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 50px;\n width: 150px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all 0.5s ease-in-out;\n}\n\n.button:hover {\n box-shadow: .5px .5px 150px #252525;\n}\n\n.type1::after {\n content: \"Thanks\";\n height: 50px;\n width: 150px;\n background-color: #008080;\n color: #fff;\n position: absolute;\n top: 0%;\n left: 0%;\n transform: translateY(50px);\n font-size: 1.2rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.5s ease-in-out;\n}\n\n.type1::before {\n content: \"Hover Me\";\n height: 50px;\n width: 150px;\n background-color: #fff;\n color: #008080;\n position: absolute;\n top: 0%;\n left: 0%;\n transform: translateY(0px) scale(1.2);\n font-size: 1.2rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.5s ease-in-out;\n}\n\n.type1:hover::after {\n transform: translateY(0) scale(1.2);\n}\n\n.type1:hover::before {\n transform: translateY(-50px) scale(0) rotate(120deg);\n}"}]}},"actionData":null,"errors":null}