{"loaderData":{"0":null,"0-3":{"total":7301,"projects":[{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"738851","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":862,"cssLen":491,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".filter {\n width: 50px;\n height: 50px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid rgba(0, 0, 0, 0.192);\n cursor: pointer;\n box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.021);\n transition: all 0.3s;\n}\n\n.filter svg {\n height: 16px;\n fill: rgb(77, 77, 77);\n transition: all 0.3s;\n}\n.filter:hover {\n box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.11);\n background-color: rgb(59, 59, 59);\n}\n.filter:hover svg {\n fill: white;\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"e59fdf","snapshot":null,"tags":null,"title":"button by Nameniok","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":483,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n color: #ede5ff;\n transition: 0.2s;\n}\n\n.button:hover {\n box-shadow: 0px 0px 17px -4px #976cff;\n border-color: #976cff;\n color: #f7f5ff;\n background-color: #2e2546;\n}\n\n.button:active {\n box-shadow: 0px 0px 17px -7px #976cff;\n border-color: #976cff;\n transform: scale(0.95);\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"e60e83","snapshot":null,"tags":null,"title":"button by Remon125","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":727,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 15px 60px;\n background: transparent;\n border: 2px solid #6528F7;\n font-size: 15px;\n font-weight: bold;\n color: #ffffff;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n display: flex;\n overflow: hidden;\n transition: all 0.5s;\n text-transform: uppercase;\n}\n\nbutton span {\n transition: all 0.5s;\n z-index: -1;\n}\n\nbutton::after,\nbutton::before {\n content: \"\";\n position: absolute;\n width: 0;\n height: 100%;\n background: #6528F7;\n top: 0;\n transform: skewX(35deg);\n transition: all 0.5s;\n z-index: -1;\n}\n\nbutton::after {\n left: -20px;\n}\n\nbutton::before {\n right: -20px;\n}\n\nbutton:hover::after {\n width: 50%;\n left: 0;\n}\n\nbutton:hover::before {\n width: 50%;\n right: 0;\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"408cee","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":658,"cssLen":660,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".fullscreen-btn {\n width: 25px;\n height: 25px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n cursor: pointer;\n transition: all 0.3s;\n position: relative;\n overflow: hidden;\n}\n\n.fullscreen-btn svg {\n height: 100%;\n}\n.fullscreen-btn:hover {\n width: 30px;\n height: 30px;\n overflow: visible;\n}\n.tooltip {\n position: absolute;\n top: -40px;\n background-color: rgba(0, 0, 0, 0.753);\n color: white;\n padding: 5px 10px;\n border-radius: 5px;\n font-size: 0.8em;\n transition: all 0.3s;\n opacity: 0;\n}\n.fullscreen-btn:hover .tooltip {\n transform: translateY(2.5px);\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"3d14e8","snapshot":null,"tags":null,"title":"button by JesscMendesr","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":453,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n font-size: 1rem;\n background-color: #F2E1C1 !important;\n transform: translateY(-0.10em);\n box-shadow: 3px 3px 0px rgba(55, 22, 22, 0.67);\n border: 1px solid rgba(55, 22, 22, 0.67);\n border-radius: 50px;\n padding: 0.75em 1.5em;\n transition: 0.2s;\n cursor: pointer;\n}\n\nbutton:hover {\n box-shadow: 4px 6px 0px rgba(55, 22, 22, 0.67);\n transform: translateY(-0.4em);\n}\n\nbutton:active {\n box-shadow: none;\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"22d2a7","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":1782,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: #ce1d1d;\n padding: 10px 50px 10px 30px;\n color: white;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n font-size: 20px;\n border-radius: 80px;\n text-transform: uppercase;\n transition: all .5s ease-in-out;\n border: none;\n}\n\nbutton:hover:before {\n width: 79px;\n height: 79px;\n transform: translate(4.6pc, -1.8pc);\n background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzc2IDE1MS4wNWMtNTkuNjYgMC0xMTYuODggMjMuNjk5LTE1OS4wNiA2NS44ODdzLTY1Ljg4NyA5OS40MDItNjUuODg3IDE1OS4wNmMwIDU5LjY2NCAyMy42OTkgMTE2Ljg4IDY1Ljg4NyAxNTkuMDdzOTkuNDAyIDY1Ljg4NyAxNTkuMDYgNjUuODg3YzM5LjQ4OCAwIDc4LjI4MS0xMC4zOTUgMTEyLjQ4LTMwLjEzNyAzNC4xOTUtMTkuNzQ2IDYyLjU5NC00OC4xNDUgODIuMzQtODIuMzQgMTkuNzQyLTM0LjE5NSAzMC4xMzctNzIuOTg4IDMwLjEzNy0xMTIuNDggMC01OS42Ni0yMy42OTktMTE2Ljg4LTY1Ljg4Ny0xNTkuMDZzLTk5LjQwMi02NS44ODctMTU5LjA3LTY1Ljg4N3ptLTQyLjYyMSAzNDMuMzUtMzMuMTUyLTMzLjU3OCA4NC41ODItODQuODItODQuNTgyLTg0LjgxNiAzMy4zOTEtMzMuNTc4IDExOC4zOSAxMTguMzl6IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=\");\n}\n\nbutton::before {\n content: \"\";\n background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMjk1LjQ1IDYwMC45NSAyMjQuOTUtMjI0Ljk1LTIyNC45NS0yMjQuOTUtNjMuODQgNjMuODQgMTYxLjE2IDE2MS4xMS0xNjEuMTYgMTYxLjExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K\");\n height: 20px;\n width: 20px;\n position: absolute;\n transition: all .5s ease-in-out;\n background-size: 100%;\n transform: translate(6.3pc, 0.2pc);\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"22e7a3","snapshot":null,"tags":null,"title":"button by simontheonlyone","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":118,"cssLen":938,"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: 6em;\n height: 4em;\n border: none;\n background: none;\n}\n\n.X {\n content: '';\n position: absolute;\n top: 50%;\n left: 33%;\n width: 2em;\n height: 1.5px;\n background-color: #fff;\n transform: rotate(45deg);\n}\n\n.Y {\n content: '';\n position: absolute;\n top: 50%;\n left: 33%;\n width: 2em;\n height: 1.5px;\n background-color: #fff;\n transform: rotate(-45deg);\n}\n\n.close {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n bottom: -40%;\n left: 70%;\n width: 3em;\n height: 1.7em;\n font-size: 16px;\n background-color: rgb(254, 255, 225);\n color: #000;\n border: 1px solid #000;\n pointer-events: none;\n opacity: 0;\n}\n\n.button:hover {\n background-color: rgb(210, 0, 0);\n}\n\n.button:active {\n background-color: rgb(130, 0, 0);\n}\n\n.button:hover > .close {\n animation: close 0.2s forwards 1.25s;\n}\n\n@keyframes close {\n 100% {\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"ff8773","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1105,"cssLen":1159,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cartBtn {\n width: 155px;\n height: 50px;\n border: none;\n border-radius: 0px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n color: white;\n font-weight: 500;\n position: relative;\n background-color: rgb(29, 29, 29);\n box-shadow: 0 20px 30px -7px rgba(27, 27, 27, 0.219);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n overflow: hidden;\n}\n\n.cart {\n z-index: 2;\n}\n\n.cartBtn:active {\n transform: scale(0.96);\n}\n\n.product {\n position: absolute;\n width: 12px;\n border-radius: 3px;\n content: \"\";\n left: 23px;\n bottom: 23px;\n opacity: 0;\n z-index: 1;\n fill: rgb(211, 211, 211);\n}\n\n.cartBtn:hover .product {\n animation: slide-in-top 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-30px);\n opacity: 1;\n }\n\n 100% {\n transform: translateY(0) rotate(-90deg);\n opacity: 1;\n }\n}\n\n.cartBtn:hover .cart {\n animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n}\n\n@keyframes slide-in-left {\n 0% {\n transform: translateX(-10px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"b7c416","snapshot":null,"tags":null,"title":"button by elijahwgummer-poc","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":1078,"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 display: inline-block;\n padding: 12px 26px;\n font-size: 20px;\n font-weight: bold;\n text-align: center;\n text-decoration: none;\n border-radius: 50px;\n color: #fff;\n background-color: #ff6b6b;\n border: none;\n overflow: hidden;\n transition: all 0.3s ease;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n}\n\n.button span {\n position: relative;\n z-index: 1;\n}\n\n.button .overlay {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.3);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.button .shine {\n position: absolute;\n top: -80px;\n left: -80px;\n width: 160px;\n height: 160px;\n background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, transparent 80%);\n transform: rotate(45deg);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.button:hover .overlay {\n opacity: 0.7;\n}\n\n.button:hover .shine {\n opacity: 1;\n}\n\n.button:hover {\n background-color: #ff3333;\n}\n\n.button:active {\n background-color: #cc0000;\n}\n"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"eddfb6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:24.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 #0084ff;\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: #0084ff;\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: #0084ff;\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:24.000Z","isPrivate":0,"projectId":"6a861b","snapshot":null,"tags":null,"title":"button by 2Fl00rian6","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":401,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n background-color: rgb(20, 87, 244);\n border: 1px solid rgb(20, 87, 244);\n padding: 12px 20px;\n border-radius: 7px;\n transition: .3s;\n color: #fff;\n}\n\nbutton:hover {\n border: 1px solid rgb(20, 87, 244);\n background-color: transparent;\n color: rgb(20, 87, 244);\n}\n\nbutton:focus {\n box-shadow: 0px 0px 0px 5px rgba(20, 87, 244, 0.37), 0px 0px 0px 10px rgba(20, 87, 244, 0.38);\n outline: none;\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"8d520b","snapshot":null,"tags":null,"title":"button by SuliLevente","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23,"cssLen":752,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #040810;\n color: #C7C7C7;\n padding: 15px;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 17px;\n overflow: hidden;\n position: relative;\n border: 3px double #2D6FBB;\n z-index: 1;\n}\n\nbutton::before {\n content: \"\";\n background-color: #2D6FBB;\n transform: translateX(-100%);\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n transition: all 0.3s;\n z-index: -1;\n}\n\nbutton:hover::before {\n transform: translateX(0);\n}\n\nbutton::after {\n content: \"\";\n background-color: #2D6FBB;\n transform: translateX(100%);\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n transition: all 0.3s;\n z-index: -1;\n}\n\nbutton:hover::after {\n transform: translateX(0);\n}"}]}},"actionData":null,"errors":null}