{"loaderData":{"0":null,"0-3":{"total":7433,"projects":[{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"89288b","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":758,"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: #181818;\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-22T16:59:59.000Z","isPrivate":0,"projectId":"30cf7d","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1505,"cssLen":700,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".Btn {\n border: none;\n border-radius: 50%;\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: .4s;\n cursor: pointer;\n position: relative;\n background-color: rgb(31, 31, 31);\n overflow: hidden;\n}\n\n.svgIcon {\n transition-duration: .3s;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.text {\n position: absolute;\n color: rgb(255, 255, 255);\n width: 120px;\n font-weight: 600;\n opacity: 0;\n transition-duration: .4s;\n}\n\n.Btn:hover {\n width: 110px;\n transition-duration: .4s;\n border-radius: 30px;\n}\n\n.Btn:hover .text {\n opacity: 1;\n transition-duration: .4s;\n}\n\n.Btn:hover .svgIcon {\n opacity: 0;\n transition-duration: .3s;\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"d31bd2","snapshot":null,"tags":null,"title":"button by AnshKaushal","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":302,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 1.5px solid black;\n padding: 10px;\n width: 100px;\n margin: 15px;\n color: #f5f0f0;\n background-color: #101014;\n box-shadow: 3px 3px 6px #101014;\n transition: transform 0.3s ease-in-out;\n}\n\nbutton:hover {\n background-color: #f5f0f0;\n color: #101014;\n transform: scale(1.2);\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"b98dbe","snapshot":null,"tags":null,"title":"button by TanimMahbub","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":569,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n /* typography */\n font-size: 22px;\n font-weight: 600;\n font-family: monospace;\n text-transform: uppercase;\n letter-spacing: 1px;\n\n /* ui */\n border: none;\n cursor: pointer;\n display: inline-block;\n padding: 12px 35px;\n border-radius: 8px;\n background: #f6781e;\n color: #fff;\n box-shadow: 0 0 0 3px #2f2e41, 0 6px 0 #2f2e41;\n transition: all 0.1s ease, background 0.3s ease;\n}\n\n/* ux */\n.button:hover,\n.button:focus {\n background: #df6108;\n}\n\n.button:active {\n box-shadow: 0 0 0 3px #2f2e41, 0 4px 0 #2f2e41;\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"b64ec6","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":806,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n /* Variables */\n --button_radius: 0.75em;\n --button_color: #e8e8e8;\n --button_outline_color: #000000;\n font-size: 17px;\n font-weight: bold;\n border: none;\n border-radius: var(--button_radius);\n background: var(--button_outline_color);\n}\n\n.button_top {\n display: block;\n box-sizing: border-box;\n border: 2px solid var(--button_outline_color);\n border-radius: var(--button_radius);\n padding: 0.75em 1.5em;\n color: var(--button_outline_color);\n transform: translateY(-0.2em);\n transition: transform 0.1s ease;\n background: linear-gradient(45deg, #FF5F6D, #FFC371);\n}\n\nbutton:hover .button_top {\n /* Pull the button upwards when hovered */\n transform: translateY(-0.33em);\n}\n\nbutton:active .button_top {\n /* Push the button downwards when pressed */\n transform: translateY(0);\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"757f62","snapshot":null,"tags":null,"title":"button by AkashKobal","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":51,"cssLen":1274,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n ","css":".buttonDownload {\n display: inline-block;\n position: relative;\n padding: 10px 25px;\n background-color: #4CC713;\n color: white;\n font-family: sans-serif;\n text-decoration: none;\n font-size: 0.9em;\n text-align: center;\n text-indent: 15px;\n border: none;\n border-radius: 2em;\n font-weight: bold;\n}\n\n.buttonDownload:hover {\n background-color: #1a60a2;\n color: white;\n}\n\n.buttonDownload:before, .buttonDownload:after {\n content: ' ';\n display: block;\n position: absolute;\n left: 15px;\n top: 52%;\n}\n\n.buttonDownload:before {\n width: 10px;\n height: 2px;\n border-style: solid;\n border-width: 0 2px 2px;\n}\n\n.buttonDownload:after {\n width: 0;\n height: 0;\n margin-left: 3px;\n margin-top: -7px;\n border-style: solid;\n border-width: 4px 4px 0 4px;\n border-color: transparent;\n border-top-color: inherit;\n animation: downloadArrow 1s linear infinite;\n animation-play-state: paused;\n}\n\n.buttonDownload:hover:before {\n border-color: #bdd3ef;\n}\n\n.buttonDownload:hover:after {\n border-top-color: #eff1f7;\n animation-play-state: running;\n}\n\n@keyframes downloadArrow {\n 0% {\n margin-top: -7px;\n opacity: 1;\n }\n\n 0.001% {\n margin-top: -15px;\n opacity: 0.4;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n margin-top: 0;\n opacity: 0.4;\n }\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"8e2c23","snapshot":null,"tags":null,"title":"button by leerepublik","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":345,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-color: #fff;\n height: 40px;\n width: 120px;\n border-radius: 10px;\n border: 1px solid #add8e6;\n box-shadow: 3px 3px #fff, 5px 5px #add8e6;\n color: #add8e6;\n font-weight: 700;\n transition: box-shadow 300ms linear;\n}\n\n.button:hover {\n box-shadow: none;\n color: #fff;\n background-color: #add8e6;\n cursor: pointer;\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"ed08b2","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1275,"cssLen":987,"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: #7289da;\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(206, 206, 206, 0.466);\n background-color: rgba(214, 214, 214, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"afecf0","snapshot":null,"tags":null,"title":"button by nimsay06","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1504,"cssLen":1091,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 4em;\n width: 12em;\n border-radius: 18px;\n border: 4px solid lightskyblue;\n padding: 0.2em;\n overflow: hidden;\n}\n\n.text {\n display: block;\n font-size: 20px;\n color: lightskyblue;\n}\n\n.afterText {\n display: none;\n}\n\n.clouds {\n display: none;\n height: 4rem;\n width: 8rem;\n}\n\n.button:hover {\n cursor: pointer;\n}\n\n.button:hover .text {\n text-decoration: underline;\n font-weight: bold;\n}\n\n.button:focus {\n transition: ease-in 200ms;\n background-color: lightskyblue;\n border: none;\n}\n\n.button:focus .text {\n display: none;\n}\n\n.button:focus .afterText {\n animation: hoverMovement 1s ease-in alternate infinite;\n display: block;\n font-size: 25px;\n letter-spacing: 5px;\n color: rgb(90, 94, 97);\n}\n\n.button:focus .clouds {\n display: block;\n animation: cloudMovement ease-in-out 3s infinite;\n margin-top: -1.5em;\n}\n\n@keyframes hoverMovement {\n from {\n transform: translateY(0em);\n }\n\n to {\n transform: translateY(-0.1em);\n }\n}\n\n@keyframes cloudMovement {\n from {\n transform: translateX(-5em);\n }\n\n to {\n transform: translateX(10em);\n }\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"1aacf5","snapshot":null,"tags":null,"title":"button by csozidev","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11309,"cssLen":2246,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n\n\n\n\n\n\n\n

","css":"/* Cool share button made by: csozi | Website: english.csozi.hu*/\n\n.buttons {\n position: relative;\n display: grid;\n place-items: center;\n height: fit-content;\n width: fit-content;\n transition: 0.3s;\n border-radius: 50%;\n}\n\n.buttons:hover {\n padding: 60px;\n}\n\n.buttons:hover .button {\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.main-button {\n position: relative;\n display: grid;\n place-items: center;\n padding: 10px;\n border: none;\n background: #e8e8e8;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n border-radius: 50%;\n transition: 0.2s;\n z-index: 100;\n}\n\n.button {\n position: absolute;\n display: grid;\n place-items: center;\n padding: 10px;\n border: none;\n background: #e8e8e8;\n box-shadow: 5px 5px 12px rgba(202, 202, 202, 0), -5px -5px 12px rgba(255, 255, 255, 0);\n transition: 0.3s;\n border-radius: 50%;\n}\n\n.discord-button:hover {\n background: #5865F2;\n}\n\n.buttons:hover .discord-button {\n translate: 70px 0px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.twitter-button:hover {\n background: #1CA1F1;\n}\n\n.buttons:hover .twitter-button {\n translate: 47px -47px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.reddit-button:hover {\n background: #FF4500;\n}\n\n.buttons:hover .reddit-button {\n translate: 0px -70px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.messenger-button:hover {\n background: #0093FF;\n}\n\n.buttons:hover .messenger-button {\n translate: -47px -47px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.pinterest-button:hover {\n background: #F0002A;\n}\n\n.buttons:hover .pinterest-button {\n translate: -70px 0px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.instagram-button:hover {\n background: #F914AF;\n}\n\n.buttons:hover .instagram-button {\n translate: -47px 47px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.snapchat-button:hover {\n background: #FFFC00;\n}\n\n.buttons:hover .snapchat-button {\n translate: 0px 70px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}\n\n.whatsapp-button:hover {\n background: #25D366;\n}\n\n.buttons:hover .whatsapp-button {\n translate: 47px 47px;\n box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"5d7399","snapshot":null,"tags":null,"title":"button by mi-series","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":719,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 160px;\n line-height: 40px;\n font-weight: 500px;\n font-size: 17px;\n letter-spacing: 2px;\n text-decoration: none;\n text-transform: uppercase;\n padding: 0;\n background: #FBEAEB;\n position: relative;\n z-index: 2;\n color: #FBEAEB;\n perspective: 300px;\n transform-style: preserve-3d;\n border-radius: 6px;\n border: none;\n}\n\nbutton:hover {\n color: #2F3C7E;\n}\n\nbutton::after {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n font-weight: 500px;\n background: #2F3C7E;\n border-radius: 6px;\n z-index: -1;\n transform-origin: center bottom;\n transform: rotateX(0);\n transition: all 0.3s ease;\n}\n\nbutton:hover::after {\n transform: rotateX(-180deg);\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"097ef9","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":385,"cssLen":777,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 180px;\n height: 45px;\n border-radius: 40px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: white;\n background-color: transparent;\n cursor: pointer;\n position: relative;\n background: linear-gradient( to right,#44ea76, #39fad7);\n transition-duration: .3s;\n letter-spacing: 1.4px;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.Btn:hover {\n transform: scale(0.95);\n transition-duration: .3s;\n}\n\n.Btn::before {\n content: \"\";\n position: absolute;\n width: 80%;\n height: 30%;\n background: linear-gradient( to right,#44ea76, #39fad7);\n filter: blur(10px);\n bottom: -3px;\n z-index: -1;\n transition-duration: .3s;\n}\n\n.Btn:hover::before {\n bottom: -1px;\n filter: blur(5px);\n transition-duration: .3s;\n}"}]}},"actionData":null,"errors":null}