{"loaderData":{"0":null,"0-2":{"total":7072,"projects":[{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"3ef0b6","snapshot":null,"tags":null,"title":"button by eduardo-amaro-maciel","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":63,"cssLen":864,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Button\n

","css":".btn {\n width: 150px;\n height: 50px;\n border: 1px solid #333;\n font-size: 20px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 0;\n transition: 1s;\n color: #000;\n font-family: sans-serif;\n}\n\n.btn::before,\n.btn::after {\n position: absolute;\n background: #e8e8e8;\n z-index: -1;\n transition: 1s;\n content: \"\";\n}\n\n.btn::before {\n height: 50px;\n width: 130px;\n}\n\n.btn::after {\n width: 150px;\n height: 30px;\n}\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.btn:hover::before {\n width: 0px;\n background: #e8e8e8;\n}\n\n.btn:hover::after {\n height: 0px;\n background: #fff;\n}\n\n.btn:hover {\n background: #fff;\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"42291c","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":285,"cssLen":593,"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 align-items: center;\n justify-content: center;\n gap: 10px;\n background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);\n border: solid 3px transparent;\n background-clip: padding-box;\n box-shadow: 0px 0px 0px 3px #ffffff00;\n color: white;\n min-height: 43px;\n padding: 0 13px 0 13px;\n border-radius: 50px;\n text-transform: uppercase;\n letter-spacing: 2px;\n transition: all .5s ease;\n}\n\nbutton:active {\n transform: scale(.9);\n transition: all 100ms ease;\n}\n\nbutton:hover {\n box-shadow: 0px 0px 0px 3px #30a1b8;\n}\n\nbutton svg {\n width: 16px;\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"e6583a","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5818,"cssLen":1093,"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: 15px 35px;\n font-size: 15px;\n font-weight: bold;\n color: #2F5C2F;\n background-color: transparent;\n border: 3px solid #2F5C2F;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.5s;\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 10px;\n left: 10px;\n background-color: #D5A084;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.5s;\n}\n\nbutton:hover::after {\n top: 0;\n left: 0;\n}\n\n.icon-1 {\n position: absolute;\n width: 15%;\n top: 10px;\n right: 15px;\n color: #2F5C2F;\n transform-origin: 100% 100%;\n transform: rotate(-25deg) translateX(120%) translateY(20%);\n z-index: -1;\n transition: all 0.5s;\n}\n\nbutton:hover .icon-1 {\n width: 25%;\n transform: rotate(10deg) translateX(110%) translateY(-40%);\n}\n\n.icon-2 {\n position: absolute;\n width: 15%;\n top: 20px;\n left: 10px;\n color: #2F5C2F;\n transform-origin: 100% 100%;\n z-index: -1;\n transition: all 0.5s;\n}\n\nbutton:hover .icon-2 {\n width: 50%;\n top: -40px;\n left: -80px;\n transform: rotate(90deg);\n z-index: 1;\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"05d3c3","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1454,"cssLen":520,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --bg-color: #111;\n --main-color: #fefefe;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.button:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.icon {\n width: 24px;\n height: 24px;\n fill: var(--main-color);\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"017098","snapshot":null,"tags":null,"title":"button by CodeGame2010","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":362,"cssLen":472,"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 align-items: center;\n justify-content: center;\n width: 200px;\n height: 50px;\n border-radius: 50px;\n border: 0;\n outline: 0;\n font-size: 18px;\n background: #08f;\n color: #fff;\n}\n\nsvg {\n margin: 0 0 0 10px;\n}\n\nbutton:hover svg {\n margin: 0 0 0 25px;\n transition: 0.3s;\n}\n\nbutton:not(:hover) svg {\n transition: 0.3s;\n}\n\nbutton:active {\n transform: scale(0.9, 0.9);\n transition: 200ms;\n}\n\nbutton:not(:active) {\n transition: 200ms;\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"4c2ce9","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4245,"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 width: 180px;\n height: 50px;\n border: none;\n background-color: rgb(231, 0, 0);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow-y: hidden;\n border-radius: 0px;\n cursor: pointer;\n box-shadow: 8px 8px 0px rgb(12, 12, 12);\n transition-duration: .3s;\n}\n\n.layer {\n width: 60px;\n position: absolute;\n left: -30px;\n transition-duration: .3s;\n fill: #ffaf02;\n}\n\nbutton:hover {\n transform: translateY(5px);\n box-shadow: 3px 3px 0px rgb(0, 0, 0);\n transition-duration: .3s;\n}\n\nbutton:hover .layer {\n left: 0%;\n width: 100%;\n transition-duration: .3s;\n}\n\nbutton p {\n color: white;\n font-weight: 600;\n font-size: 14px;\n position: absolute;\n z-index: 2;\n transition-duration: .1s;\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n}\n\nbutton:hover p {\n color: transparent;\n transition-duration: .3s;\n}\n"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"70fb4f","snapshot":null,"tags":null,"title":"button by AKAspidey01","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":510,"cssLen":1618,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-left-32 {\n left: -8rem\n}\n\n.-right-32 {\n right: -8rem\n}\n\n.top-0 {\n top: 0px\n}\n\n.z-10 {\n z-index: 10\n}\n\n.h-full {\n height: 100%\n}\n\n.w-full {\n width: 100%\n}\n\n.-rotate-45 {\n --tw-rotate: -45deg;\n 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))\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.border {\n border-width: 1px\n}\n\n.border-green-500 {\n --tw-border-opacity: 1;\n border-color: rgb(34 197 94 / var(--tw-border-opacity))\n}\n\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity))\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34 197 94 / var(--tw-text-opacity))\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.group:hover .group-hover\\:left-0 {\n left: 0px\n}\n\n.group:hover .group-hover\\:right-0 {\n right: 0px\n}\n\n.group:hover .group-hover\\:rotate-0 {\n --tw-rotate: 0deg;\n 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))\n}\n\n.group:hover .group-hover\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"9b230d","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":574,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-family: inherit;\n width: 7.18em;\n height: 2.81em;\n cursor: pointer;\n background: #000000;\n border: 0.14em solid #0000FF;\n box-shadow: 0px 0.25em 0.25em rgba(0, 0, 0, 0.25);\n border-radius: 0.93em;\n transition: all 0.3s;\n color: white;\n font-size: 1.06em;\n text-transform: uppercase;\n}\n\nbutton:hover {\n width: 7.18em;\n height: 2.81em;\n box-shadow: 0px 0.81em 0.62em rgba(0, 0, 0, 0.25);\n background: blue;\n /*background: #000000;*/\n border-radius: 0.93em;\n transform: translate(0.38em, -0.37em);\n}\n\nbutton:active {\n transform: scale(0.90)\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"9f79ea","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":393,"cssLen":667,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 17px;\n font-family: inherit;\n font-weight: 700;\n padding: 4px;\n border-radius: 20px;\n border: none;\n color: black;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;\n background: linear-gradient(0deg, rgba(255,213,0,1) 0%, rgba(255,213,0,1) 47%, rgba(0,91,187,1) 47%, rgba(0,91,187,1) 100%);\n}\n\nbutton .button-content {\n display: flex;\n align-items: center;\n background: white;\n padding: 0.7em 1.5em;\n padding-left: 1.2em;\n border-radius: 16px;\n}\n\nbutton svg {\n width: 22px;\n height: 22px;\n margin-right: 6px;\n color: #ff0000;\n transition: transform 0.3s;\n}\n\nbutton:hover svg {\n transform: scale(1.2);\n}\n\n"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"a5d48c","snapshot":null,"tags":null,"title":"button by Abdalrazaq3","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1026,"cssLen":863,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n Save Post\n\n","css":".flex {\n display: flex;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.items-center {\n align-items: center;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-lime-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(26 46 5 / var(--tw-bg-opacity));\n}\n.fill-lime-400 {\n fill: #a3e635;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.pr-1 {\n padding-right: 0.25rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-lime-400 {\n --tw-text-opacity: 1;\n color: rgb(163 230 53 / var(--tw-text-opacity));\n}\n.duration-100 {\n transition-duration: 100ms;\n}\n.hover\\:bg-lime-900:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(54 83 20 / var(--tw-bg-opacity));\n}\n.active\\:border:active {\n border-width: 1px;\n}\n.active\\:border-lime-400:active {\n --tw-border-opacity: 1;\n border-color: rgb(163 230 53 / var(--tw-border-opacity));\n}\n"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"aa2dc3","snapshot":null,"tags":null,"title":"button by abdul12commando","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":989,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* === removing default button style ===*/\n.button {\n margin: 0;\n height: auto;\n background: transparent;\n padding: 0;\n border: none;\n}\n\n/* button styling */\n.button {\n --border-right: 6px;\n --text-stroke-color: rgba(201, 187, 187, 0.6);\n --animation-color: #8806df;\n --fs-size: 2em;\n letter-spacing: 3px;\n text-decoration: none;\n font-size: var(--fs-size);\n font-family: \"Arial\";\n position: relative;\n text-transform: uppercase;\n color: transparent;\n -webkit-text-stroke: 1px var(--text-stroke-color);\n}\n/* this is the text, when you hover on button */\n.hover-text {\n position: absolute;\n box-sizing: border-box;\n content: attr(data-text);\n color: var(--animation-color);\n width: 0%;\n inset: 0;\n border-right: var(--border-right) solid var(--animation-color);\n overflow: hidden;\n transition: 0.5s;\n -webkit-text-stroke: 1px var(--animation-color);\n}\n/* hover */\n.button:hover .hover-text {\n width: 100%;\n filter: drop-shadow(0 0 23px var(--animation-color))\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"032381","snapshot":null,"tags":null,"title":"button by JkHuger","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":440,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".click {\n margin: 2rem auto;\n display: flex;\n background-color: #7A5FFF;\n color: white;\n cursor: pointer;\n border: none;\n font-size: 1.2rem;\n padding: 10px 15px;\n border-radius: .25rem\n}\n\n.click {\n transition: background .8s ease-out;\n background: #7A5FFF radial-gradient(circle, transparent 1%, #7A5FFF 1%) center/15000%;\n}\n\n.click:active {\n background-color: #c1b4ff;\n background-size: 100%;\n transition: background 0s;\n}\n "}]}},"actionData":null,"errors":null}