{"loaderData":{"0":null,"0-3":{"total":7509,"projects":[{"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}"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"c2d56e","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":1115,"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: flex;\n align-items: center;\n justify-content: center;\n color: #e8e8e8;\n background-color: #212121;\n width: 70px;\n height: 70px;\n font-size: 24px;\n text-transform: uppercase;\n border: 2px solid #212121;\n border-radius: 10px;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.15),\n 2px 2px 2px rgba(0, 0, 0, 0.1),\n -3px -3px 2px rgba(255, 255, 255, 0.05),\n -2px -2px 1px rgba(255, 255, 255, 0.05);\n overflow: hidden;\n cursor: pointer;\n}\n\n.button .span {\n position: relative;\n z-index: 2;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n background-color: #e8e8e8;\n width: 100%;\n height: 100%;\n left: 0%;\n bottom: 0%;\n transform: translate(-100%, 100%);\n border-radius: 10px;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button:hover::before {\n transform: translate(0,0);\n transition-delay: 0.4s;\n}\n\n.button:hover .span {\n scale: 1.2;\n}\n\n.button:hover {\n box-shadow: none;\n}\n\n.button:active {\n scale: 0.95;\n}\n\n\n"},{"created":"2024-01-22T17:00:00.000Z","isPrivate":0,"projectId":"19be5d","snapshot":null,"tags":null,"title":"button by ashish-yadv","updated":"2024-01-22T17:00:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":494,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 17px 40px;\n border-radius: 10px;\n border: 0;\n background-color: rgb(255, 56, 86);\n letter-spacing: 1.5px;\n font-size: 15px;\n transition: all .3s ease;\n box-shadow: rgb(201, 46, 70) 0px -10px 0px 0px;\n color: hsl(0, 0%, 100%);\n}\n\nbutton:hover {\n box-shadow: rgb(201, 46, 70) 0px 7px 0px 0px;\n}\n\nbutton:active {\n background-color: rgb(255, 56, 86);\n /*50, 168, 80*/\n box-shadow: rgb(201, 46, 70) 0px 0px 0px 0px;\n transform: translateY(5px);\n transition: 200ms;\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"706b25","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":977,"cssLen":1347,"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 \n \n \n \n \n \n \n \n \n \n

","css":".box {\n --clr-shadow__border: #0096fa;\n --clr-text: #F6F4EB;\n --clr-snowflake: #F6F4EB;\n --clr-snowfall: #91C8E4;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n font-weight: 600;\n font-size: 1.5rem;\n letter-spacing: 0.2rem;\n padding: calc(var(--size) / 3) var(--size);\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--clr-text);\n text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),\n -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.snowfall {\n width: 100%;\n height: 100%;\n bottom: 0%;\n gap: 0.3rem;\n transition: 0.5s ease-in-out;\n z-index: -1;\n opacity: 0;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n background: linear-gradient( to bottom, var(--clr-snowfall), #ffffff);\n}\n\n.box:hover .snowfall {\n opacity: 1;\n}\n\n.snowflake {\n height: 0.3rem;\n width: 0.3rem;\n box-shadow: -30px -50px var(--clr-snowflake);\n background-color: var(--clr-snowflake);\n animation: snowfall-animation calc(0.1s * var(--i)) linear infinite;\n opacity: 1;\n}\n\n@keyframes snowfall-animation {\n 0% {\n transform: translateY(calc(-103% * var(--i)));\n }\n\n 100% {\n transform: translateY(calc(100% * var(--i)));\n opacity: 0;\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"251a34","snapshot":null,"tags":null,"title":"button by polina066","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":342,"cssLen":999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-class-name {\n --color: 180,255, 100;\n border-radius: .5em;\n transition: .3s;\n background-color: rgba(var(--color), .2);\n color: rgb(var(--color));\n fill: rgb(var(--color));\n font-family: monospace;\n font-weight: bolder;\n font-size: x-large;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n cursor: pointer;\n border: 2px solid rgb(var(--color));\n box-shadow: 0 0 10px rgba(var(--color), .4);\n outline: none;\n display: flex;\n align-items: center;\n padding: .5em 1em;\n}\n\n.btn-class-name:hover {\n box-shadow: 0 0 0 5px rgba(var(--color), .5);\n}\n\n.btn-class-name span {\n transform: scale(.8);\n transition: .3s;\n}\n\n.btn-class-name:hover span {\n transform: scale(1);\n}\n\n.btn-class-name svg {\n font-size: 0;\n transform: scale(0.5) translateX(0%) rotate(-180deg);\n transition: .3s;\n}\n\n.btn-class-name:hover svg {\n font-size: 20px;\n transform: scale(1) translateX(20%) rotate(0deg);\n}\n\n.btn-class-name:active {\n transition: 0s;\n box-shadow: 0 0 0 5px rgb(var(--color));\n}"},{"created":"2024-01-22T16:59:59.000Z","isPrivate":0,"projectId":"65f7ab","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T16:59:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":638,"cssLen":757,"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":".cursor-pointer {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-orange-400 {\n stroke: #fb923c;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:fill-orange-800 {\n fill: #9a3412;\n}\n.group:active .group-active\\:fill-orange-600 {\n fill: #ea580c;\n}\n.group:active .group-active\\:stroke-orange-200 {\n stroke: #fed7aa;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"}]}},"actionData":null,"errors":null}