{"loaderData":{"0":null,"0-3":{"total":7433,"projects":[{"created":"2024-01-22T17:00:03.000Z","isPrivate":0,"projectId":"5faac7","snapshot":null,"tags":null,"title":"button by stlyash","updated":"2024-01-22T17:00:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3176,"cssLen":4427,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n \n

\n","css":"button {\n margin: 0.5cm;\n}\n.Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BG {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #24a1de;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n border: 1px solid rgba(226, 226, 226, 0.466);\n background-color: rgba(204, 204, 204, 0.466);\n backdrop-filter: blur(4px);\n}\n\n.Btntwit {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainertwit {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BGtwit {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #181818;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btntwit:hover .BGtwit {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btntwit:hover .svgContainertwit {\n background-color: rgba(156, 156, 156, 0.466);\n backdrop-filter: blur(4px);\n}\n\n.Btninsta {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 3px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainerinsta {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(4px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BGinsta {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #f09433;\n background: -moz-linear-gradient(\n 45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%\n );\n background: -webkit-linear-gradient(\n 45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%\n );\n background: linear-gradient(\n 45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%\n );\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );\n z-index: -1;\n border-radius: 9px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btninsta:hover .BGinsta {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btninsta:hover .svgContainerinsta {\n background-color: rgba(156, 156, 156, 0.466);\n}\n\n.Btnstock {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainerstock {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BGstock {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #f48024;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btnstock:hover .BGstock {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btnstock:hover .svgContainerstock {\n background-color: rgba(202, 202, 202, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:03.000Z","isPrivate":0,"projectId":"16b4ca","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1935,"cssLen":740,"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 justify-content: center;\n align-items: center;\n padding: 10px 15px;\n gap: 15px;\n background-color: rgb(66 66 66);\n outline: 3px rgb(66 66 66) solid;\n outline-offset: -3px;\n border-radius: 5px;\n border: none;\n cursor: pointer;\n transition: 400ms;\n}\n\n.button .text {\n color: white;\n font-weight: 700;\n font-size: 1em;\n transition: 400ms;\n}\n\n.button svg {\n width: 24px;\n height: 24px;\n}\n\n.button svg path {\n transition: 400ms;\n}\n\n.button:hover {\n background-color: transparent;\n}\n\n.button:hover .text {\n color: #F48E00;\n}\n\n.button:hover svg path:nth-child(1) {\n fill: #FF9700;\n}\n\n.button:hover svg path:nth-child(2) {\n fill: #F48E00;\n}\n\n.button:hover svg path:nth-child(3) {\n fill: #FF9800;\n}"},{"created":"2024-01-22T17:00:03.000Z","isPrivate":0,"projectId":"c2bb0c","snapshot":null,"tags":null,"title":"button by ossoboy","updated":"2024-01-22T17:00:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":51,"cssLen":881,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: rgb(82, 163, 255);\n color: transparent;\n border: 0 none;\n padding: 15px 30px;\n text-decoration: none;\n display: inline-block;\n transition: background-color 300ms ease, color 300ms ease;\n font-size: 17px;\n position: relative;\n text-align: center;\n cursor: pointer;\n}\n\nbutton::before,\nbutton::after {\n content: attr(data-label);\n display: inline-block;\n position: absolute;\n transition: all 300ms ease;\n width: 100%;\n left: 0;\n top: 50%;\n color: white;\n}\n\nbutton::before {\n opacity: 0;\n transform: translateY(calc(-50% - 15px));\n}\n\nbutton::after {\n opacity: 1;\n transform: translateY(-50%);\n}\n\nbutton:hover {\n background-color: rgb(66, 133, 209);\n}\n\nbutton:hover::before {\n opacity: 1;\n transform: translateY(-50%);\n}\n\nbutton:hover::after {\n opacity: 0;\n transform: translateY(calc(-50% + 15px));\n}\n\nbutton:active {\n background-color: rgb(82, 163, 255);\n}"},{"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"}]}},"actionData":null,"errors":null}