{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"c13002","snapshot":null,"tags":null,"title":"button by Custyyyy","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":66,"cssLen":388,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"#bottone1 {\n padding-left: 33px;\n padding-right: 33px;\n padding-bottom: 16px;\n padding-top: 16px;\n border-radius: 9px;\n background: #d5f365;\n border: none;\n font-family: inherit;\n text-align: center;\n cursor: pointer;\n transition: 0.4s;\n}\n\n#bottone1:hover {\n box-shadow: 7px 5px 56px -14px #C3D900;\n}\n\n#bottone1:active {\n transform: scale(0.97);\n box-shadow: 7px 5px 56px -10px #C3D900;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"a782e6","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":681,"cssLen":1129,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Download-button {\n display: flex;\n align-items: center;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n padding: 12px 20px;\n color: white;\n background: rgb(103, 92, 156);\n border: none;\n box-shadow: 0 0.7em 1.5em -0.5em rgba(59, 48, 78, 0.527);\n letter-spacing: 0.05em;\n border-radius: 8px;\n cursor: pointer;\n position: relative;\n}\n\n.Download-button svg {\n margin-right: 8px;\n width: 25px;\n}\n\n.Download-button:hover {\n box-shadow: 0 0.5em 1.5em -0.5em rgba(88, 71, 116, 0.627);\n}\n\n.Download-button:active {\n box-shadow: 0 0.3em 1em -0.5em rgba(88, 71, 116, 0.627);\n}\n\n.Download-button::before {\n content: \"\";\n width: 4px;\n height: 40%;\n background-color: white;\n position: absolute;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n left: 0;\n transition: all 0.2s;\n}\n\n.Download-button::after {\n content: \"\";\n width: 4px;\n height: 40%;\n background-color: white;\n position: absolute;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n right: 0;\n transition: all 0.2s;\n}\n\n.Download-button:hover::before,\n.Download-button:hover::after {\n height: 60%;\n}\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"40e27c","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1150,"cssLen":1338,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","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 .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(4px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all .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: #f09433;\n background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);\n background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );\n z-index: -1;\n border-radius: 9px;\n pointer-events: none;\n transition: all .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}\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"bc8fab","snapshot":null,"tags":null,"title":"button by alexmaracinaru","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":410,"cssLen":820,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".cta {\n border: none;\n background: none;\n cursor: pointer;\n}\n\n.cta span {\n padding-bottom: 7px;\n letter-spacing: 4px;\n font-size: 14px;\n padding-right: 15px;\n text-transform: uppercase;\n}\n\n.cta svg {\n transform: translateX(-8px);\n transition: all 0.3s ease;\n}\n\n.cta:hover svg {\n transform: translateX(0);\n}\n\n.cta:active svg {\n transform: scale(0.9);\n}\n\n.hover-underline-animation {\n position: relative;\n color: black;\n padding-bottom: 20px;\n}\n\n.hover-underline-animation:after {\n content: \"\";\n position: absolute;\n width: 100%;\n transform: scaleX(0);\n height: 2px;\n bottom: 0;\n left: 0;\n background-color: #000000;\n transform-origin: bottom right;\n transition: transform 0.25s ease-out;\n}\n\n.cta:hover .hover-underline-animation:after {\n transform: scaleX(1);\n transform-origin: bottom left;\n}\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"613ef3","snapshot":null,"tags":null,"title":"button by alshahwan","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1711,"cssLen":653,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* From uiverse.io by @alshahwan */\nbutton {\n background-color: #fff;\n border: 1px solid #bc2a8d;\n padding: 5px;\n position: relative;\n width: 7.2em;\n height: 2em;\n transition: 0.5s;\n font-size: 17px;\n border-radius: 0.4em;\n}\n\nbutton p {\n position: absolute;\n top: 0.4em;\n left: 1.2em;\n margin: 0;\n padding: 0;\n transition: .5s;\n color: #bc2a8d;\n}\n\nbutton svg {\n position: absolute;\n top: 0.45em;\n right: 0.5em;\n margin: 0;\n padding: 0;\n opacity: 0;\n transition: 0.5s;\n height: 1em;\n fill: #fff\n}\n\nbutton:hover p {\n left: 0.6em;\n color: #fff\n}\n\nbutton:hover svg {\n opacity: 1;\n}\n\nbutton:hover {\n background-color: #bc2a8d;\n}\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"6b42ec","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":873,"cssLen":664,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n display: flex;\n align-items: center;\n font-family: inherit;\n cursor: pointer;\n font-weight: 500;\n font-size: 17px;\n padding: 0.8em 1.3em 0.8em 0.9em;\n color: white;\n background: #ad5389;\n background: linear-gradient(to right, #0f0c29, #302b63, #24243e);\n border: none;\n letter-spacing: 0.05em;\n border-radius: 16px;\n}\n\nbutton svg {\n margin-right: 3px;\n transform: rotate(30deg);\n transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);\n}\n\nbutton span {\n transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);\n}\n\nbutton:hover svg {\n transform: translateX(5px) rotate(90deg);\n}\n\nbutton:hover span {\n transform: translateX(7px);\n}\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"ffda77","snapshot":null,"tags":null,"title":"button by sahilxkhadka","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":843,"cssLen":2675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-bottom-full {\n bottom: -100%\n}\n\n.left-1\\/2 {\n left: 50%\n}\n\n.flex {\n display: flex\n}\n\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.gap-1\\.5 {\n gap: 0.375rem\n}\n\n.rounded-3xl {\n border-radius: 1.5rem\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n\n.bg-opacity-70 {\n --tw-bg-opacity: 0.7\n}\n\n.bg-opacity-80 {\n --tw-bg-opacity: 0.8\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.text-\\[\\#f1f1f1\\] {\n --tw-text-opacity: 1;\n color: rgb(241 241 241 / var(--tw-text-opacity))\n}\n\n.opacity-0 {\n opacity: 0\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition {\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.hover\\:bg-opacity-70:hover {\n --tw-bg-opacity: 0.7\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"f2ec7a","snapshot":null,"tags":null,"title":"button by Jedi-hongbin","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":770,"cssLen":544,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n display: flex;\n height: 3em;\n width: 100px;\n align-items: center;\n justify-content: center;\n background-color: #eeeeee4b;\n border-radius: 3px;\n letter-spacing: 1px;\n transition: all 0.2s linear;\n cursor: pointer;\n border: none;\n background: #fff;\n}\n\nbutton > svg {\n margin-right: 5px;\n margin-left: 5px;\n font-size: 20px;\n transition: all 0.4s ease-in;\n}\n\nbutton:hover > svg {\n font-size: 1.2em;\n transform: translateX(-5px);\n}\n\nbutton:hover {\n box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;\n transform: translateY(-2px);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"45f8cb","snapshot":null,"tags":null,"title":"button by Damithkumara","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":1007,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 0.9em 1.8em;\n text-transform: uppercase;\n text-decoration: none;\n letter-spacing: 4px;\n color: transparent;\n border: 3px solid #ff0;\n font-size: 14px;\n position: relative;\n font-family: inherit;\n background: transparent;\n cursor: pointer;\n}\n\nbutton::before {\n content: \"button\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #363636;\n color: #ff0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n}\n\nbutton:hover::before {\n left: 100%;\n transform: scale(0) rotateY(360deg);\n opacity: 0;\n}\n\nbutton::after {\n content: \"button\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background-color: #363636;\n color: #ff0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n transform: scale(0) rotateY(0deg);\n opacity: 0;\n}\n\nbutton:hover::after {\n left: 0;\n transform: scale(1) rotateY(360deg);\n opacity: 1;\n}\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"74b265","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":914,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".animated-button {\n position: relative;\n display: inline-block;\n padding: 12px 24px;\n border: none;\n font-size: 16px;\n background-color: inherit;\n border-radius: 100px;\n font-weight: 600;\n color: #ffffff40;\n box-shadow: 0 0 0 2px #ffffff20;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.animated-button span:last-child {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n background-color: #2196F3;\n border-radius: 50%;\n opacity: 0;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.animated-button span:first-child {\n position: relative;\n z-index: 1;\n}\n\n.animated-button:hover {\n box-shadow: 0 0 0 5px #2195f360;\n color: #ffffff;\n}\n\n.animated-button:active {\n scale: 0.95;\n}\n\n.animated-button:hover span:last-child {\n width: 150px;\n height: 150px;\n opacity: 1;\n}\n\n\n"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"0501fe","snapshot":null,"tags":null,"title":"button by krlozCJ","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":31,"cssLen":326,"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 outline: none;\n background-color: #6c5ce7;\n padding: 10px 20px;\n font-size: 12px;\n font-weight: 700;\n color: #fff;\n border-radius: 5px;\n transition: all ease 0.1s;\n box-shadow: 0px 5px 0px 0px #a29bfe;\n}\n\nbutton:active {\n transform: translateY(5px);\n box-shadow: 0px 0px 0px 0px #a29bfe;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"2b797c","snapshot":null,"tags":null,"title":"button by fabiodevbr","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1647,"cssLen":1192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Click to see what happens

","css":"button {\n background-color: #F2F7FA;\n width: 100px;\n height: 30px;\n border: none;\n border-radius: 10px;\n font-weight: 600;\n overflow: hidden;\n transition-duration: 700ms;\n}\n\nbutton span:first-child {\n color: #0E418F;\n position: absolute;\n transform: translate(-50%, -50%)\n}\n\nbutton span:last-child {\n position: absolute;\n color: #B5CCF3;\n opacity: 0;\n transform: translateY(100%) translateX(-50%);\n height: 14px;\n line-height: 13px;\n}\n\nbutton:focus {\n background-color: #0E418F;\n width: 120px;\n height: 40px;\n transition-delay: 100ms;\n transition-duration: 500ms;\n}\n\nbutton:focus span:first-child {\n color: #B5CCF3;\n transform: translateX(-50%) translateY(-150%);\n opacity: 0;\n transition-duration: 500ms;\n}\n\nbutton:focus span:last-child {\n transform: translateX(-50%) translateY(-50%);\n opacity: 1;\n transition-delay: 300ms;\n transition-duration: 500ms;\n}\n\nbutton:focus:end {\n background-color: #FFFFFF;\n width: 120px;\n height: 40px;\n transition-duration: 900ms;\n}\n\n.centralize {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n.description {\n margin-top: 10px;\n color: #B5CCF3;\n}"}]}},"actionData":null,"errors":null}