{"loaderData":{"0":null,"0-3":{"total":7544,"projects":[{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"791738","snapshot":null,"tags":null,"title":"button by Pradeepsaranbishnoi","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2074,"cssLen":763,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".social-links,.flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.social-btn {\n cursor: pointer;\n height: 50px;\n width: 50px;\n font-family: 'Titillium Web', sans-serif;\n color: #333;\n border-radius: 10px;\n box-shadow: 0px 10px 10px rgba(0,0,0,0.1);\n background: white;\n margin: 5px;\n transition: 0.3s;\n justify-content: center;\n}\n\n.social-btn svg {\n height: 24px;\n width: 24px;\n}\n\n.social-btn span {\n width: 0px;\n overflow: hidden;\n transition: 0.3s;\n text-align: center;\n margin-left: 5px;\n}\n\n.social-btn:hover {\n width: 150px;\n border-radius: 5px;\n}\n\n.social-btn:hover span {\n padding: 2px;\n width: 80px;\n}\n\n#twitter svg {\n fill: #1da1f2;\n}\n\n#linkedin svg {\n fill: #0e76a8;\n}\n\n#github {\n fill: #333;\n}\n"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"cec2c8","snapshot":null,"tags":null,"title":"button by ahmed150up2","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":845,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\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 #00ace8;\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: #00ace8;\n transition: color 0.3s 0.1s ease-out;\n text-align: center;\n fill: #00ace8;\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 fill: #fff;\n color: #fff;\n border: 1px solid #00ace8;\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em #00ace8;\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"04f070","snapshot":null,"tags":null,"title":"button by faxriddin20","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":648,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n cursor: pointer;\n box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,\n rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,\n rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,\n rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,\n rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;\n border: none;\n width: 160px;\n height: 50px;\n color: white;\n background-color: transparent;\n border-radius: 20px;\n transition: all 0.3s ease;\n}\n.button:active {\n box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,\n rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;\n}\n"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"3ef13b","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1329,"cssLen":870,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\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 rgba(88, 101, 242, 1);\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: rgba(88, 101, 242, 1);\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 rgba(88, 101, 242, 1);\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em rgba(88, 101, 242, 1);\n}"},{"created":"2024-01-22T17:00:01.000Z","isPrivate":0,"projectId":"dadace","snapshot":null,"tags":null,"title":"button by CPC23","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2001,"cssLen":552,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

","css":".icons-social-media {\n align-items: center;\n margin-top: 10px;\n padding: 5px;\n width: 32px;\n cursor: pointer !important;\n transition: 300ms all ease-in-out;\n position: relative;\n}\n\n.icons-social-media:hover {\n translate: -0px -10px;\n}\n\n#instagram,\n #youtube,#twitch {\n transition: 300ms all ease-in-out;\n clip-path: circle(65%);\n}\n\n#instagram:hover {\n background-color: rgb(221, 157, 189);\n}\n\n#youtube {\n height: 35px;\n}\n\n#youtube:hover {\n background-color: rgb(241, 96, 96);\n}\n\n#twitch:hover {\n background-color: rgb(196, 143, 245);\n}"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"dece22","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":360,"cssLen":675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".submitBtn {\n width: 120px;\n height: 40px;\n border-radius: 30px;\n border: none;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-weight: 600;\n cursor: pointer;\n color: white;\n background: linear-gradient(to left,rgb(230, 35, 0),rgb(255, 174, 0));\n letter-spacing: 0.7px;\n}\n\n.submitBtn:hover .arrow {\n animation: slide-in-left 0.6s 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(0px);\n opacity: 1;\n }\n}\n\n.submitBtn:active {\n transform: scale(0.97);\n}"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"fbd70f","snapshot":null,"tags":null,"title":"button by praveen-prasad2","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":68,"cssLen":639,"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: 50px;\n border-radius: 30em;\n font-size: 15px;\n font-family: inherit;\n border: none;\n position: relative;\n overflow: hidden;\n z-index: 1;\n box-shadow: 6px 6px 12px #c5c5c5,\n -6px -6px 12px #ffffff;\n}\n\nbutton:hover {\n color: #ffffff;\n transform: scale(1.1);\n outline: 2px solid #70bdca;\n box-shadow: 4px 5px 17px -4px #268391;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n left: -50px;\n top: 0;\n width: 0;\n height: 100%;\n background-color: #2c9caf;\n transform: skewX(45deg);\n z-index: -1;\n transition: width 1000ms;\n}\n\nbutton:hover::before {\n width: 250%;\n}\n\n\n\n"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"eb0075","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":977,"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: transparent;\n color: #ffffff;\n padding: 15px 30px;\n border-radius: 5px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: background-color 0.3s ease-in, transform 0.3s ease;\n font-size: 18px;\n font-weight: bold;\n border: none;\n box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);\n}\n\n.button:before,\n.button:after {\n content: \"\";\n position: absolute;\n left: -100%;\n width: 200%;\n height: 100%;\n background-color: #76a6ca;\n opacity: 0;\n transition: transform 0.5s ease, opacity 0.5s ease;\n transform: rotate(45deg);\n transform-origin: center;\n}\n\n.button:before {\n top: 0;\n}\n\n.button:after {\n bottom: 0;\n}\n\n.button:hover:before,\n.button:hover:after {\n opacity: 0.6;\n transform: rotate(0deg);\n}\n\n.button:hover {\n transform: translateY(-5px);\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);\n}\n\n.button:active {\n background-color: #76a6ca;\n box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);\n transform: scale(0.98);\n}\n"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"5d6b85","snapshot":null,"tags":null,"title":"button by Deri-Kurniawan","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":84,"cssLen":946,"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: 16px 32px;\n border-radius: 14px;\n overflow: hidden;\n z-index: 1;\n border: 1px solid rgb(221, 218, 218);\n background: white;\n font-weight: bold;\n font-size: 16px;\n color: #1993e4;\n transition: all 1.2s linear;\n cursor: pointer;\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n background: linear-gradient(to right, #1993e4, #1993e456);\n border-radius: 30%;\n height: 96px;\n width: 96px;\n animation: spin infinite linear 1.8s;\n animation-delay: 0;\n bottom: -38px;\n right: -112px;\n transition: all 1.2s linear;\n z-index: 0;\n}\n\n.button:hover {\n color: #fff;\n transition-duration: 1.2s;\n}\n\n.button:hover::after {\n right: -60px;\n bottom: -92px;\n width: 256px;\n height: 256px;\n}\n\n.button > .button-content {\n position: relative;\n z-index: 2;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"2ff691","snapshot":null,"tags":null,"title":"button by Dashrath-Sharma","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1196,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n border: none;\n font-size: 17px;\n padding: 1em 2em;\n position: relative;\n display: grid;\n place-items: center;\n overflow: hidden;\n z-index: 1;\n background: #caf0f8;\n border-radius: 8px;\n box-shadow: 2px 2px 0 #333,\n 2px 2px 200px #ffba08 inset;\n color: #fff;\n}\n\n.button:active {\n transform: scale(.98);\n}\n\n.button:hover {\n box-shadow: 2px 2px 0 #333,\n 2px 2px 200px #003566 inset;\n}\n\n.button::before {\n content: '';\n position: absolute;\n left: -41%;\n width: 150%;\n height: 300%;\n border-radius: 50%;\n box-shadow: 2px 2px 0 #333,\n 0 0 0 8px #d00000 inset,\n 0 0 0 16px #dc2f02 inset,\n 0 0 0 24px #e85d04 inset,\n 0 0 0 32px #f48c06 inset,\n 0 0 0 40px #faa307 inset;\n z-index: -1;\n transition: .2s;\n}\n\n.button:active::before {\n opacity: .001;\n box-shadow: 2px 2px 200px #03045e inset;\n}\n\n.button:hover::before {\n box-shadow: 2px 2px 0 #333,\n 0 0 0 8px #90e0ef inset,\n 0 0 0 16px #48cae4 inset,\n 0 0 0 24px #00b4d8 inset,\n 0 0 0 32px #0096c7 inset,\n 0 0 0 40px #0077b6 inset;\n left: -9%;\n width: 150%;\n height: 300%;\n}"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"84e438","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":97,"cssLen":1061,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 0px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background-color: black;\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n font-size: 2em;\n color: white;\n transition-duration: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: white;\n font-size: 1.2em;\n font-weight: 500;\n transition-duration: .3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 0px;\n transition-duration: .3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: .3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: .3s;\n padding-right: 20px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px ,2px);\n}"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"ff533c","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":444,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 1px solid black;\n padding: 12px 30px 12px 30px;\n border-radius: 30px;\n background-color: #fdceb6;\n font-weight: bolder;\n font-size: 15px;\n box-shadow: 0px 0px 1px;\n transform: all 2s esase;\n transition-duration: .3s;\n}\n\nbutton:hover {\n transform: translateY(-10px);\n box-shadow: 0px 7px 1px rgb(0, 0, 0);\n border: 1px solid black;\n}\n\nbutton:active {\n transform: translateY(10px);\n box-shadow: 0px 0px 1px;\n}\n \n\n"}]}},"actionData":null,"errors":null}