{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"created":"2024-01-22T17:00:03.000Z","isPrivate":0,"projectId":"2051b3","snapshot":null,"tags":null,"title":"button by uiverse-astronaut","updated":"2024-01-22T17:00:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":375,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: #94fb1f;\n font-family: inherit;\n padding: 0.6em 1.3em;\n font-weight: 900;\n font-size: 18px;\n border: 3px solid black;\n border-radius: 0.4em;\n box-shadow: 0.1em 0.1em;\n}\n\nbutton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.15em 0.15em;\n}\n\nbutton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.05em 0.05em;\n}"},{"created":"2024-01-22T17:00:03.000Z","isPrivate":0,"projectId":"0c2331","snapshot":null,"tags":null,"title":"button by AlimurtuzaCodes","updated":"2024-01-22T17:00:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":277,"cssLen":1619,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".h-12{height:3rem}.w-40{width:10rem}.cursor-pointer{cursor:pointer}.rounded-3xl{border-radius:1.5rem}.border-2{border-width:2px}.border-\\[\\#9748FF\\]{--tw-border-opacity:1;border-color:rgb(151 72 255 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.font-medium{font-weight:500}.text-\\[\\#333\\]{--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity))}.shadow-\\[inset_0px_-2px_0px_1px_\\#9748FF\\]{--tw-shadow:inset 0px -2px 0px 1px #9748FF;--tw-shadow-colored:inset 0px -2px 0px 1px 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{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-\\[\\#9748FF\\]:hover{--tw-bg-opacity:1;background-color:rgb(151 72 255 / var(--tw-bg-opacity))}.group:hover .group-hover\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:00:03.000Z","isPrivate":0,"projectId":"08009a","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":615,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --color: #f5ae51;\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:02.000Z","isPrivate":0,"projectId":"678124","snapshot":null,"tags":null,"title":"button by meermubashar","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":557,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 140px;\n height: 45px;\n font-size: 23px;\n cursor: pointer;\n border: none;\n outline: none;\n background: transparent;\n color: white;\n font-family: 'Times New Roman', Times, serif;\n font-weight: 700;\n position: relative;\n transition: all 0.5s;\n z-index: 1;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 5px;\n height: 100%;\n background-color: white;\n z-index: -1;\n transition: all 0.5s;\n}\n\nbutton:hover::before {\n width: 100%;\n}\n\nbutton:hover {\n color: black;\n}\n\nbutton:active:before {\n background: #b9b9b9;\n}"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"75cfdc","snapshot":null,"tags":null,"title":"button by uiverse-astronaut","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":375,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: #5cbdfd;\n font-family: inherit;\n padding: 0.6em 1.3em;\n font-weight: 900;\n font-size: 18px;\n border: 3px solid black;\n border-radius: 0.4em;\n box-shadow: 0.1em 0.1em;\n}\n\nbutton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.15em 0.15em;\n}\n\nbutton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.05em 0.05em;\n}"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"664c2a","snapshot":null,"tags":null,"title":"button by KSAplay","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":84,"cssLen":1168,"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 font-family: sans-serif;\n font-weight: bold;\n font-size: 1em;\n padding: 0.5em 2em;\n border-radius: 2em;\n border: 0 solid #fefefe;\n background-color: #ece5d8;\n color: #3b4255;\n box-shadow: 0 0 9px -4px #797979;\n transition: 100ms;\n}\n\n.button::after {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n border-radius: 2em;\n background-color: #ffdf99;\n opacity: 0;\n z-index: 1;\n transition: 100ms;\n}\n\n.circle {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n left: 0.4em;\n height: 1.5em;\n width: 1.5em;\n border-radius: 1em;\n background-color: #313131;\n}\n\n.circle::before {\n position: absolute;\n content: '';\n width: 32%;\n height: 32%;\n border-radius: 1em;\n border: 3px solid #ffcd33;\n}\n\n.button span {\n z-index: 2;\n padding-left: 1.1em;\n}\n\n.button:hover {\n border: 3px solid #fefefe;\n box-shadow: 0 0 5px 0 #f0f0f0, inset 0 0 3px 0 #656565;\n}\n\n.button:active {\n border: 0 solid #fefefe;\n color: white;\n box-shadow: inset 0 0 5px 0 #4b4b4b;\n opacity: .7;\n}\n\n.button:active.button::after {\n opacity: .5;\n}"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"ce2b25","snapshot":null,"tags":null,"title":"button by Dashrath-Sharma","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":74,"cssLen":1017,"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 font-size: 17px;\n font-weight: 800;\n color: #c77dff;\n padding: 1em 2em;\n border: none;\n background: none;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n text-shadow: 1px 1px 20px #e0aaff;\n}\n\n.button::before,\n.button::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n background: #c77dff;\n transition: width .3s .6s;\n}\n\n.button::before {\n top: 0;\n left: 0;\n transform-origin: top;\n}\n\n.button::after {\n bottom: 0;\n right: 0;\n transform-origin: bottom;\n}\n\n.button:hover::before,\n.button:hover::after {\n width: 65%;\n}\n\n.button span {\n position: absolute;\n width: 0;\n height: 2px;\n background: #c77dff;\n transition: width .3s, transform .3s .3s;\n transform: rotate(22.3deg);\n}\n\n.button span:nth-child(1) {\n top: 0;\n left: 0;\n transform-origin: left;\n}\n\n.button span:nth-child(2) {\n bottom: 0;\n right: 0;\n transform-origin: right;\n}\n\n.button:hover span {\n width: 55%;\n transform: rotate(50deg);\n}"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"eb4a2f","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":342,"cssLen":888,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".contactButton {\n background: rgba(88, 101, 242, 1);\n color: white;\n font-family: inherit;\n padding: 0.45em;\n padding-left: 1.0em;\n font-size: 17px;\n font-weight: 500;\n border-radius: 0.9em;\n border: none;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\n overflow: hidden;\n position: relative;\n height: 2.8em;\n padding-right: 3em;\n}\n\n.iconButton {\n margin-left: 1em;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.2em;\n width: 2.2em;\n border-radius: 0.7em;\n box-shadow: 0.1em 0.1em 0.6em 0.2em #7a8cf3;\n right: 0.3em;\n transition: all 0.3s;\n}\n\n.contactButton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.15em 0.15em #5566c2;\n}\n\n.contactButton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.05em 0.05em #5566c2;\n}"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"3dff20","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".swipe-button {\n padding: 10px 20px;\n font-size: 18px;\n border: none;\n background: linear-gradient(45deg, #3498db, #e74c3c, #9b59b6, #2ecc71);\n background-size: 200% 200%;\n background-position: 0 0;\n color: white;\n border-radius: 5px;\n cursor: pointer;\n font-family: sans-serif;\n transition: background-position 0.5s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;\n}\n\n.swipe-button:hover {\n background-position: 100% 100%;\n transform: scale(1.05);\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);\n}\n\n.swipe-button:active {\n transform: translateY(2px);\n color: #fff;\n /* Change text color when active */\n}\n"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"4f2dba","snapshot":null,"tags":null,"title":"button by TomMussard","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":599,"cssLen":1104,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background-color: rgb(255, 65, 65);\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sign svg {\n width: 17px;\n}\n\n.sign svg path {\n fill: white;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: white;\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: .3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\n transition-duration: .3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: .3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: .3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px ,2px);\n}"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"0ca60c","snapshot":null,"tags":null,"title":"button by r7chardgh","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":933,"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 padding: 1em 1.5em;\n transform: rotateX(40deg)rotateZ(40deg);\n transform-style: preserve-3d;\n border: .1em solid black;\n transition: all 150ms;\n background-color: rgb(233, 211, 184);\n cursor: pointer;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n width: 2em;\n height: 99%;\n border: .1em solid black;\n top: -.15em;\n right: 0;\n transform-origin: right;\n transform: rotateY(-90deg);\n transition: all 150ms;\n background-color: rgb(155, 139, 120);\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 2em;\n border: .1em solid black;\n bottom: 0;\n left: -.15em;\n transform-origin: bottom;\n transform: rotateX(90deg);\n transition: all 150ms;\n background-color: rgb(199, 179, 155);\n}\n\n.button:active {\n transform: rotateX(40deg)rotateZ(40deg) translateZ(-1em);\n}\n\n.button:active::before {\n width: 0;\n}\n\n.button:active::after {\n height: 0;\n}\n"},{"created":"2024-01-22T17:00:02.000Z","isPrivate":0,"projectId":"08f923","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":521,"cssLen":903,"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: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 1px solid #0078E8;\n background-color: #0082FC;\n overflow: hidden;\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: #0078E8;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: #fff;\n}\n\n.button:hover {\n background: #0078E8;\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: #006cd0;\n}\n\n.button:active {\n border: 1px solid #006cd0;\n}"}]}},"actionData":null,"errors":null}