{"loaderData":{"0":null,"0-3":{"total":7433,"projects":[{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"8f2e85","snapshot":null,"tags":null,"title":"button by akshat-patel28","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2171,"cssLen":645,"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","css":".button-container {\n display: flex;\n background-color: rgb(27, 133, 219);\n width: 250px;\n height: 40px;\n align-items: center;\n justify-content: space-around;\n border-radius: 10px;\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px,\n rgba(27, 133, 219, 0.5) 5px 10px 15px;\n}\n\n.button {\n outline: 0 !important;\n border: 0 !important;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n transition: all ease-in-out 0.3s;\n cursor: pointer;\n}\n\n.button:hover {\n transform: translateY(-3px);\n}\n\n.icon {\n font-size: 20px;\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"548212","snapshot":null,"tags":null,"title":"button by Nayzerftn","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":730,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-hover {\n position: relative;\n display: inline-block;\n padding: 15px 30px;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #ffffff;\n background-color: #4b4b4b;\n border: none;\n outline: none;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease-out;\n}\n\n.btn-hover:hover {\n background-color: #522ba7;\n}\n\n.btn-hover::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: #ffffff;\n opacity: 0.8;\n transition: all 0.5s ease-out;\n}\n\n.btn-hover:hover::before {\n transform: translate(-50%, -50%) scale(20);\n opacity: 0;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"534d92","snapshot":null,"tags":null,"title":"button by praveen-prasad2","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":732,"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: inline-block;\n text-decoration: none;\n color: #fff;\n padding: 3px;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 200%;\n height: 100%;\n background: linear-gradient(115deg,\n #4fcf70, #fad648, \n #a767e5,#12bcfe, \n #44ce7b);\n background-size: 50% 100%;\n border-radius: inherit;\n}\n\n.button:hover::before {\n animation: animate_border .75s\n linear infinite;\n}\n\n.button span {\n position: relative;\n z-index: 2;\n display: block;\n background-color: #000;\n padding: 13px 20px;\n border-radius: 3px;\n}\n\n@keyframes animate_border {\n to {\n transform: translateX(-50%)\n }\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"d00486","snapshot":null,"tags":null,"title":"button by svqantonio","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3629,"cssLen":2003,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".main {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.up {\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n}\n\n.down {\n display: flex;\n flex-direction: row;\n gap: 0.5em;\n}\n\n.card1 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 90px 5px 5px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.instagram {\n margin-top: 1.5em;\n margin-left: 1.2em;\n fill: #cc39a4;\n}\n\n.card2 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 90px 5px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.facebook {\n margin-top: 1.5em;\n margin-left: -.9em;\n fill: #03A9F4;\n}\n\n.card3 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 5px 5px 90px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.whatsapp {\n margin-top: -.6em;\n margin-left: 1.2em;\n fill: #00ff00;\n}\n\n.card4 {\n width: 90px;\n height: 90px;\n outline: none;\n border: none;\n background: white;\n border-radius: 5px 5px 90px 5px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .2s ease-in-out;\n}\n\n.gmail {\n margin-top: -.9em;\n margin-left: -1.2em;\n fill: #f14336;\n}\n\n.card1:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #cc39a4;\n}\n\n.card1:hover .instagram {\n fill: white;\n}\n\n.card2:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #1877f2;\n}\n\n.card2:hover .facebook {\n fill: white;\n}\n\n.card3:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #00ff00;\n}\n\n.card3:hover .whatsapp {\n fill: white;\n}\n\n.card4:hover {\n cursor: pointer;\n scale: 1.1;\n background-color: #FF0004;\n}\n\n.card4:hover .gmail {\n fill: white;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"836ca2","snapshot":null,"tags":null,"title":"button by vishalparajuli","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":646,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

rocket

roll

","css":".button {\n width: 100px;\n height: 50px;\n position: relative;\n perspective: 800px;\n}\n\n.button__front,\n .button__back {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background-color: #3498db;\n border-radius: 5px;\n position: absolute;\n backface-visibility: hidden;\n transition: transform 0.5s ease;\n}\n\n.button__back {\n background-color: #e74c3c;\n transform: rotateY(180deg);\n}\n\n.button:hover .button__front {\n transform: rotateY(-180deg);\n}\n\n.button:hover .button__back {\n transform: rotateY(0);\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"3c4b01","snapshot":null,"tags":null,"title":"button by bhaveshxrawat","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":608,"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 border-radius: 24px;\n border-style: none;\n box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;\n box-sizing: border-box;\n color: #3c4043;\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n letter-spacing: .25px;\n line-height: normal;\n padding: 11px 24px;\n transition: background box-shadow 280ms ease;\n}\n\nbutton:hover {\n background: #F6F9FE;\n color: #174ea6;\n}\n\nbutton:active {\n box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);\n outline: none;\n border: 2px solid #4285f4;\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"344810","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":381,"cssLen":844,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".signupBtn {\n width: 120px;\n height: 40px;\n border-radius: 30px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding-left: 20px;\n gap: 9px;\n color: white;\n background: linear-gradient(to right,rgb(128, 128, 255),rgb(183, 128, 255));\n position: relative;\n cursor: pointer;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.212);\n}\n\n.arrow {\n position: absolute;\n right: 7.5px;\n background-color: rgb(255, 255, 255);\n width: 25px;\n height: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n}\n\n.signupBtn:hover .arrow {\n animation: slide-in-left 0.7s 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:05.000Z","isPrivate":0,"projectId":"4b24a3","snapshot":null,"tags":null,"title":"button by Kemboi-Dun","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":698,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".btn {\n font-size: 17px;\n background: transparent;\n border: none;\n padding: 1em 1.5em;\n color: #f8f8f8;\n text-transform: uppercase;\n position: relative;\n transition: .5s ease;\n cursor: pointer;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n height: 2px;\n width: 0;\n background-color: #f8f8f8;\n transition: .5s ease;\n}\n\n.btn:hover {\n color: #181818;\n transition-delay: .5s;\n}\n\n.btn:hover::before {\n width: 100%;\n}\n\n.btn::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n height: 0;\n width: 100%;\n background-color: #f8f8f8;\n transition: .4s ease;\n z-index: -1;\n}\n\n.btn:hover::after {\n height: 100%;\n transition-delay: 0.4s;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"f0a91e","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":725,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background: transparent;\n color: #fff;\n padding: 10px 20px;\n font-size: 18px;\n border-radius: 5px;\n cursor: pointer;\n border: 2px solid rgba(255, 255, 255, 0.5);\n backdrop-filter: blur(5px);\n transition: background-color 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n}\n\n.button:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);\n transform: translateX(-100%);\n transition: transform 0.3s ease-in-out;\n pointer-events: none;\n}\n\n.button:hover {\n background-color: rgba(255, 255, 255, 0.2);\n}\n\n.button:hover:before {\n transform: translateX(0);\n}\n"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"4df1dc","snapshot":null,"tags":null,"title":"button by sahilxkhadka","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":961,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n all: unset;\n position: relative;\n height: 4em;\n width: 10em;\n padding: 8px 24px;\n border-radius: 10px;\n background: linear-gradient(180deg, #282828, #202020);\n box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15),\n inset 0 -8px 8px rgba(0, 0, 0, 0.25),\n 0 0 0 2px rgba(0, 0, 0, 0.75),\n 10px 20px 25px rgba(0, 0, 0, 0.4);\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 3px;\n left: 4px;\n bottom: 14px;\n right: 12px;\n background: linear-gradient(90deg, #232323, #4a4a4a);\n border-radius: 10px;\n box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.25),\n 10px 5px 10px rgba(0, 0, 0, 0.15);\n border-left: 1px solid #0004;\n border-bottom: 1px solid #0004;\n border-top: 1px solid #0009;\n}\n\nbutton span {\n font-size: 1.5rem;\n color: white;\n position: relative;\n margin-top: -8px;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"1a4fc9","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":906,"cssLen":506,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 100px;\n height: 32px;\n background-color: #55acee;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 0 8px;\n justify-content: space-between;\n transition: all 0.3s;\n}\n\nbutton:hover {\n opacity: 0.85;\n transform: translateY(-4px);\n}\n\nbutton .label {\n font-size: 12px;\n line-height: 32px;\n color: #fff;\n font-weight: 700;\n letter-spacing: 1px;\n margin: 0 auto;\n}\n\nbutton svg {\n fill: #fff;\n width: 30px;\n height: 30px;\n}"},{"created":"2024-01-22T17:00:05.000Z","isPrivate":0,"projectId":"019193","snapshot":null,"tags":null,"title":"button by sarra-thabet","updated":"2024-01-22T17:00:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1748,"cssLen":807,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n background: transparent;\n position: relative;\n padding: 5px 15px;\n display: flex;\n align-items: center;\n font-size: 17px;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n border: 1px solid black;\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: black;\n transition: color 0.3s 0.1s ease-out;\n text-align: center;\n}\n\nbutton span {\n margin: 10px;\n}\n\nbutton::before {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n content: \"\";\n border-radius: 50%;\n display: block;\n width: 20em;\n height: 20em;\n left: -5em;\n text-align: center;\n transition: box-shadow 0.5s ease-out;\n z-index: -1;\n}\n\nbutton:hover {\n color: #fff;\n border: 1px solid black;\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em black;\n}\n"}]}},"actionData":null,"errors":null}