{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"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"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"f3186a","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":598,"cssLen":1106,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","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: 50%;\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: rgb(163, 142, 255);\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sign svg {\n width: 17px;\n}\n\n.sign svg path {\n fill: white;\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: 600;\n transition-duration: .3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\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: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px ,2px);\n}"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"b92904","snapshot":null,"tags":null,"title":"button by Abdulahuwu1","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36,"cssLen":1016,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n --color: #000000;\n --color2: #ffffff;\n padding: 0.8em 1.75em;\n background-color: #ffffff;\n border-radius: 6px;\n border: 0.3px solid var(--color);\n transition: 4s;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n z-index: 1;\n font-weight: 300;\n font-size: 17px;\n font-family: cursive;\n text-transform: uppercase;\n color: var(--color);\n}\n\n.btn::after,\n.btn::before {\n content: \"\";\n display: block;\n height: 100%;\n width: 100%;\n transform: skew(90deg) translate(-50%, -50%);\n position: absolute;\n inset: 50%;\n left: 25%;\n z-index: -1;\n transition: 0.5s ease-out;\n background-color: var(--color);\n}\n\n.btn::before {\n top: -50%;\n left: -25%;\n transform: skew(90deg) rotate(180deg) translate(-50%, -50%);\n}\n\n.btn:hover::before {\n transform: skew(45deg) rotate(180deg) translate(-50%, -50%);\n}\n\n.btn:hover::after {\n transform: skew(45deg) translate(-50%, -50%);\n}\n\n.btn:hover {\n color: var(--color2);\n}\n\n.btn:active {\n filter: brightness(0.7);\n transform: scale(0.98);\n}\n"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"796ebc","snapshot":null,"tags":null,"title":"button by menezes11","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":1713,"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 padding: 1em 1.8em;\n outline: none;\n border: 1px solid #303030;\n background: #212121;\n color: #ae00ff;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-size: 15px;\n overflow: hidden;\n transition: 0.2s;\n border-radius: 20px;\n cursor: pointer;\n font-weight: bold;\n}\n\nbutton:hover {\n box-shadow: 0 0 10px #ae00ff, 0 0 25px #001eff, 0 0 50px #ae00ff;\n transition-delay: 0.6s;\n}\n\nbutton span {\n position: absolute;\n}\n\nbutton span:nth-child(1) {\n top: 0;\n left: -100%;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #ae00ff);\n}\n\nbutton:hover span:nth-child(1) {\n left: 100%;\n transition: 0.7s;\n}\n\nbutton span:nth-child(3) {\n bottom: 0;\n right: -100%;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #001eff);\n}\n\nbutton:hover span:nth-child(3) {\n right: 100%;\n transition: 0.7s;\n transition-delay: 0.35s;\n}\n\nbutton span:nth-child(2) {\n top: -100%;\n right: 0;\n width: 2px;\n height: 100%;\n background: linear-gradient(180deg, transparent, #ae00ff);\n}\n\nbutton:hover span:nth-child(2) {\n top: 100%;\n transition: 0.7s;\n transition-delay: 0.17s;\n}\n\nbutton span:nth-child(4) {\n bottom: -100%;\n left: 0;\n width: 2px;\n height: 100%;\n background: linear-gradient(360deg, transparent, #001eff);\n}\n\nbutton:hover span:nth-child(4) {\n bottom: 100%;\n transition: 0.7s;\n transition-delay: 0.52s;\n}\n\nbutton:active {\n background: #ae00af;\n background: linear-gradient(to top right, #ae00af, #001eff);\n color: #bfbfbf;\n box-shadow: 0 0 8px #ae00ff, 0 0 8px #001eff, 0 0 8px #ae00ff;\n transition: 0.1s;\n}\n\nbutton:active span:nth-child(1) \nspan:nth-child(2) \nspan:nth-child(2) \nspan:nth-child(2) {\n transition: none;\n transition-delay: none;\n}\n"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"c072f4","snapshot":null,"tags":null,"title":"button by joe-watson-sbf","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":128,"cssLen":749,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n font-size: 14px;\n font-weight: 300;\n text-transform: uppercase;\n line-height: 8px;\n border-radius: 30px;\n border: none;\n background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);\n color: #fff;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\n.btn > * {\n display: inline-block;\n transition: all ease-in-out .5s;\n}\n\n.btn__visible {\n padding: 1.2rem 3rem;\n text-align: center;\n}\n\n.btn__invisible {\n width: 100%;\n position: absolute;\n padding: 1.2rem 0;\n left: 0;\n top: -100%;\n}\n\n.btn:hover {\n background-image: linear-gradient(160deg, #f093fb 0%, #f5576c 100%);\n}\n\n.btn:hover .btn__visible {\n transform: translateY(100%);\n}\n\n.btn:hover .btn__invisible {\n top: 0;\n}\n\n.btn:focus {\n outline: none;\n}\n"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"f15f0e","snapshot":null,"tags":null,"title":"button by DGtalsam","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":60,"cssLen":1764,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".custom-btn {\n width: 130px;\n height: 40px;\n color: #fff;\n border-radius: 5px;\n padding: 10px 25px;\n font-family: 'Lato', sans-serif;\n font-weight: 500;\n background: transparent;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n display: inline-block;\n box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),\n 7px 7px 20px 0px rgba(0, 0, 0, .1),\n 4px 4px 5px 0px rgba(0, 0, 0, .1);\n outline: none;\n}\n\n.btn {\n background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);\n line-height: 42px;\n padding: 0;\n border: none;\n}\n\n.btn span {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.btn:before,\n.btn:after {\n position: absolute;\n content: \"\";\n right: 0;\n bottom: 0;\n background: rgba(251, 75, 2, 1);\n box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),\n -4px -4px 5px 0px rgba(255, 255, 255, .9),\n 7px 7px 20px 0px rgba(0, 0, 0, .2),\n 4px 4px 5px 0px rgba(0, 0, 0, .3);\n transition: all 0.3s ease;\n}\n\n.btn:before {\n height: 0%;\n width: 2px;\n}\n\n.btn:after {\n width: 0%;\n height: 2px;\n}\n\n.btn:hover {\n color: rgba(251, 75, 2, 1);\n background: transparent;\n}\n\n.btn:hover:before {\n height: 100%;\n}\n\n.btn:hover:after {\n width: 100%;\n}\n\n.btn span:before,\n.btn span:after {\n position: absolute;\n content: \"\";\n left: 0;\n top: 0;\n background: rgba(251, 75, 2, 1);\n box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),\n -4px -4px 5px 0px rgba(255, 255, 255, .9),\n 7px 7px 20px 0px rgba(0, 0, 0, .2),\n 4px 4px 5px 0px rgba(0, 0, 0, .3);\n transition: all 0.3s ease;\n}\n\n.btn span:before {\n width: 2px;\n height: 0%;\n}\n\n.btn span:after {\n height: 2px;\n width: 0%;\n}\n\n.btn span:hover:before {\n height: 100%;\n}\n\n.btn span:hover:after {\n width: 100%;\n}"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"1189ff","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:00.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 #00b7ff;\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: #00b7ff;\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: #00b7ff;\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}"}]}},"actionData":null,"errors":null}