{"loaderData":{"0":null,"0-3":{"total":7301,"projects":[{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"dfc497","snapshot":null,"tags":null,"title":"button by MB-dragon","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1460,"cssLen":730,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n display: grid;\n place-items: center;\n background: #e3edf7;\n padding: 1.4em;\n border-radius: 10px;\n box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),\n\t -6px -6px 10px -1px rgba(255,255,255,0.7);\n border: 1px solid rgba(0,0,0,0);\n cursor: pointer;\n transition: transform 0.5s;\n}\n\n.btn:hover {\n box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),\n\t inset -4px -4px 6px -1px rgba(255,255,255,0.7),\n\t -0.5px -0.5px 0px rgba(255,255,255,1),\n\t 0.5px 0.5px 0px rgba(0,0,0,0.15),\n\t 0px 12px 10px -10px rgba(0,0,0,0.05);\n border: 1px solid rgba(0,0,0,0.1);\n transform: translateY(0.5em);\n}\n\n.btn svg {\n transition: transform 0.5s;\n}\n\n.btn:hover svg {\n transform: scale(0.9);\n fill: #333333;\n}\n\n"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"3339fb","snapshot":null,"tags":null,"title":"button by STORM992002","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":867,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n overflow: hidden;\n border: none;\n color: #3b5998;\n display: inline-block;\n font-size: 15px;\n line-height: 15px;\n padding: 18px 18px 17px;\n text-decoration: none;\n cursor: pointer;\n background: #fff;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n}\n\nbutton span:first-child {\n position: relative;\n transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);\n z-index: 10;\n}\nbutton:hover {\n color: #fff;\n}\n\nbutton:after {\n content: \"\";\n position: absolute;\n bottom: -50%;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #3b5998;\n transform-origin: bottom center;\n transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);\n transform: skewY(9.3deg) scaleY(0);\n z-index: 1;\n}\n\nbutton:hover:after {\n transform-origin: bottom center;\n transform: skewY(9.3deg) scaleY(2);\n}\n"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"98a2f6","snapshot":null,"tags":null,"title":"button by misaraadel","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1319,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-shape {\n transition: all .3s linear;\n width: 168px;\n height: 50px;\n display: flex;\n align-items: center;\n align-content: center;\n justify-content: center;\n outline: none;\n background-color: #020202;\n border-radius: 50px;\n border: 0px;\n position: relative;\n z-index: 99;\n cursor: pointer;\n}\n\n.btn-shape::after,\n.btn-shape::before {\n content: '';\n position: absolute;\n background-color: #020202;\n width: 100%;\n opacity: 0;\n height: 100%;\n left: 0;\n border-radius: 100px;\n bottom: 0;\n z-index: -2;\n transition: all .3s linear;\n}\n\n.btn-shape span {\n font-size: 16px;\n font-weight: 700;\n transition: all .3s linear;\n color: #fff;\n text-transform: capitalize;\n}\n\n.btn-shape:hover {\n transform: translate(-12px, -12px);\n}\n\n.btn-shape:hover:after {\n transform: translate(6px, 6px);\n opacity: .5;\n}\n\n.btn-shape:hover::before {\n transform: translate(12px, 12px);\n opacity: .3;\n}\n\n.btn-shape:hover span {\n animation: storm .4s linear both;\n}\n\n@keyframes storm {\n 0% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n\n 25% {\n transform: translate3d(4px, 0, 0) translateZ(0);\n }\n\n 50% {\n transform: translate3d(-3px, 0, 0) translateZ(0);\n }\n\n 75% {\n transform: translate3d(2px, 0, 0) translateZ(0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"5a2b2c","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":471,"cssLen":503,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"/* ============================ */\na {\n text-decoration: none;\n}\n/* ============================ */\n.main__scroll-text {\n color: rgba(28,28,30,1);\n}\n\n.main__action:hover .main__scroll-box {\n animation: scroll-down 3s infinite;\n}\n\n/* Animate scroll icon */\n@keyframes scroll-down {\n 0%, 100% {\n transform: translateY(0rem);\n opacity: 1;\n }\n\n 35% {\n transform: translateY(1rem);\n opacity: 0;\n }\n\n 70% {\n transform: translateY(-1rem);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"134718","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1160,"cssLen":939,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".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: #075e54;\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 background-color: rgba(156, 156, 156, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"c6ae18","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":629,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".CartBtn {\n width: 140px;\n height: 40px;\n border-radius: 12px;\n border: none;\n background-color: rgb(255, 208, 0);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: .5s;\n overflow: hidden;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103);\n position: relative;\n}\n\n.IconContainer {\n position: absolute;\n left: -50px;\n width: 30px;\n height: 30px;\n background-color: transparent;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n z-index: 2;\n transition-duration: .5s;\n}\n\n.icon {\n border-radius: 1px;\n}\n\n.text {\n height: 100%;\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(17, 17, 17);\n z-index: 1;\n transition-duration: .5s;\n font-size: 1.04em;\n font-weight: 600;\n}\n\n.CartBtn:hover .IconContainer {\n transform: translateX(58px);\n border-radius: 40px;\n transition-duration: .5s;\n}\n\n.CartBtn:hover .text {\n transform: translate(10px,0px);\n transition-duration: .5s;\n}\n\n.CartBtn:active {\n transform: scale(0.95);\n transition-duration: .5s;\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"30bd01","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":1084,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n.menu__button {\n min-width: 62px;\n height: 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 16px;\n background-color: #fff;\n transition: background-color .4s;\n}\n\n.menu__button span {\n color: #000;\n line-height: 1;\n transition: color .4s;\n}\n\n.menu__button:hover {\n background: linear-gradient(90deg, #fff 50%, transparent 0) repeat-x,\n\t\tlinear-gradient(90deg, #fff 50%, transparent 0) repeat-x,\n\t\tlinear-gradient(0deg, #fff 50%, transparent 0) repeat-y,\n\t\tlinear-gradient(0deg, #fff 50%, transparent 0) repeat-y;\n background-size: 6px 2px, 6px 2px, 2px 6px, 2px 6px;\n background-position: 0 0, 0 100%, 0 0, 100% 0;\n animation: linearGradientMove .4s infinite linear;\n}\n\n.menu__button:hover span {\n color: #fff;\n}\n\n@keyframes linearGradientMove {\n 100% {\n background-position: 6px 0, -6px 100%, 0 -6px, 100% 6px;\n }\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"c7e83c","snapshot":null,"tags":null,"title":"button by HarryProCW","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":166,"cssLen":1075,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".rounded-full{border-radius:9999px}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-indigo-500\\/50{--tw-shadow-color:rgb(99 102 241 / 0.5);--tw-shadow:var(--tw-shadow-colored)}@keyframes pulse{50%{opacity:.5}}.hover\\:animate-pulse:hover{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"0a510b","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":724,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(243, 119, 69);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: rgb(224, 64, 0);\n color: white;\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -6px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(255, 218, 203);\n}"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"36b805","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1834,"cssLen":1434,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n font-size: larger;\n height: 3em;\n width: 8em;\n position: relative;\n border: none;\n isolation: isolate;\n}\n\n.btn > span {\n position: absolute;\n border-radius: 0.5em;\n pointer-events: none;\n inset: 0;\n background-color: hsl(218, 68%, 52%);\n color: white;\n box-shadow: 1px 2px 4px #0007;\n z-index: 10;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ripple-container {\n position: absolute;\n inset: -0.3em;\n display: grid;\n grid-template-columns: repeat(16, 0.5em);\n border-radius: 0.8em;\n padding: 0.3em;\n overflow: hidden;\n}\n\n.ripple-container > span {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ripple-container > span::after {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: hsl(218, 68%, 65%);\n transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;\n width: 18em;\n height: 18em;\n opacity: 0;\n border-radius: 999em;\n}\n\n.ripple-container > span:active::after {\n transition: 0s;\n width: 0em;\n height: 0em;\n opacity: 1;\n}\n\n.ripple-container::before {\n content: \"\";\n pointer-events: none;\n position: absolute;\n background-color: hsla(218, 68%, 65%, 0.5);\n width: 13em;\n height: 13em;\n border-radius: 999em;\n transition: transform 0.25s ease-out;\n transform: translate(-25%, -25%) scale(0);\n}\n\n.ripple-container:hover::before {\n transform: translate(-25%, -25%) scale(1);\n}\n"},{"created":"2024-01-22T17:00:28.000Z","isPrivate":0,"projectId":"d121c6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":803,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: inline-block;\n text-align: center;\n font-weight: bold;\n padding: 0.7em 2em;\n border: 3px solid #14dd50;\n border-radius: 2px;\n position: relative;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);\n color: #14dd50;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\nbutton:before {\n transition: 0.5s all ease;\n position: absolute;\n top: 0;\n left: 50%;\n right: 50%;\n bottom: 0;\n opacity: 0;\n content: '';\n background-color: #14dd50;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: white;\n}\n\nbutton:hover:before, button:focus:before {\n transition: 0.5s all ease;\n left: 0;\n right: 0;\n opacity: 1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"a9bc9e","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":1790,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".button-cont {\n position: relative;\n width: fit-content;\n height: fit-content;\n border-radius: 9999px;\n}\n\n.button-cont::before {\n content: \"\";\n position: absolute;\n top: 0%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n background: #06b5d4;\n border-radius: 50%;\n filter: blur(30px);\n opacity: 0.8;\n transition: all 0.6s cubic-bezier(1, 0, 0, 1);\n}\n\n.button-cont:hover::before {\n width: 100%;\n height: 25px;\n}\n\n.button {\n cursor: pointer;\n position: relative;\n padding: 20px 48px;\n background-color: #083344;\n font-size: 16px;\n color: #fefefe;\n font-weight: 500;\n border: none;\n border-radius: 9999px;\n backdrop-filter: blur(4px);\n box-shadow: inset 0px 1px 1px #67e8f9;\n transition: all 0.3s ease-in-out, box-shadow 0.1s ease-in-out;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0%);\n width: 0;\n height: 0;\n border-radius: 50%;\n box-shadow: 0px 0px 25px 3px #67e8f97e;\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0%);\n width: 0;\n height: 0;\n background-image: linear-gradient(\n to right,\n #06b5d400,\n #4ec4db00,\n #72d0e200,\n #90ddea3d,\n #ace9f277,\n #ace9f2,\n #ace9f2,\n #ace9f277,\n #90ddea3d,\n #72d0e200,\n #4ec3db00,\n #06b6d400\n );\n border-radius: 0 0 50% 50%;\n opacity: 0.8;\n filter: drop-shadow(0px 0px 30px #06b6d4);\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.button-cont:hover .button {\n background: #18181898;\n box-shadow: inset 0px 0px 0px #fefefe;\n}\n\n.button-cont:hover .button::before {\n width: 30%;\n height: 2px;\n}\n\n.button-cont:hover .button::after {\n width: 100%;\n height: 2px;\n}\n"}]}},"actionData":null,"errors":null}