{"loaderData":{"0":null,"0-3":{"total":7556,"projects":[{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"b4953e","snapshot":null,"tags":null,"title":"button by gagan-gv","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":404,"cssLen":727,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n width: 150px;\n height: 50px;\n border-radius: 5px;\n border: none;\n transition: all 0.5s ease-in-out;\n font-size: 20px;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n font-weight: 600;\n display: flex;\n align-items: center;\n background: #040f16;\n color: #f5f5f5;\n}\n\n.btn:hover {\n box-shadow: 0 0 20px 0px #2e2e2e3a;\n}\n\n.btn .icon {\n position: absolute;\n height: 40px;\n width: 70px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n}\n\n.btn .text {\n transform: translateX(55px);\n}\n\n.btn:hover .icon {\n width: 175px;\n}\n\n.btn:hover .text {\n transition: all 0.5s;\n opacity: 0;\n}\n\n.btn:focus {\n outline: none;\n}\n\n.btn:active .icon {\n transform: scale(0.85);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"756ce0","snapshot":null,"tags":null,"title":"button by Madflows","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":2044,"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 cursor: pointer;\n outline: none;\n border: 0;\n vertical-align: middle;\n text-decoration: none;\n font-family: inherit;\n font-size: 15px;\n}\n\nbutton.learn-more {\n font-weight: 600;\n color: #382b22;\n text-transform: uppercase;\n padding: 1.25em 2em;\n background: #fff0f0;\n border: 2px solid #b18597;\n border-radius: 0.75em;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more::before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: #f9c4d2;\n border-radius: inherit;\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0.75em, -1em);\n transform: translate3d(0, 0.75em, -1em);\n transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);\n}\n\nbutton.learn-more:hover {\n background: #ffe9e9;\n -webkit-transform: translate(0, 0.25em);\n transform: translate(0, 0.25em);\n}\n\nbutton.learn-more:hover::before {\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0.5em, -1em);\n transform: translate3d(0, 0.5em, -1em);\n}\n\nbutton.learn-more:active {\n background: #ffe9e9;\n -webkit-transform: translate(0em, 0.75em);\n transform: translate(0em, 0.75em);\n}\n\nbutton.learn-more:active::before {\n -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;\n box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;\n -webkit-transform: translate3d(0, 0, -1em);\n transform: translate3d(0, 0, -1em);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"d6e924","snapshot":null,"tags":null,"title":"button by Mike11jr","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":488,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n width: 130px;\n height: 40px;\n font-size: 1.1em;\n cursor: pointer;\n background-color: #171717;\n color: #fff;\n border: none;\n border-radius: 5px;\n transition: all .4s;\n}\n\n.btn:hover {\n border-radius: 5px;\n transform: translateY(-10px);\n box-shadow: 0 7px 0 -2px #f85959,\n 0 15px 0 -4px #39a2db,\n 0 16px 10px -3px #39a2db;\n}\n\n.btn:active {\n transition: all 0.2s;\n transform: translateY(-5px);\n box-shadow: 0 2px 0 -2px #f85959,\n 0 8px 0 -4px #39a2db,\n 0 12px 10px -3px #39a2db;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"4eafdd","snapshot":null,"tags":null,"title":"button by mobinkakei","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":59,"cssLen":1894,"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 margin: 0;\n padding: 17px 35px;\n outline: none;\n text-decoration: none;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n text-transform: uppercase;\n background-color: #fff;\n border: 1px solid rgba(22, 76, 167, 0.6);\n border-radius: 10px;\n color: #1d89ff;\n font-weight: 400;\n font-family: inherit;\n z-index: 0;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);\n}\n\nbutton span {\n color: #164ca7;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.7px;\n}\n\nbutton:hover {\n animation: rotate624 0.7s ease-in-out both;\n}\n\nbutton:hover span {\n animation: storm1261 0.7s ease-in-out both;\n animation-delay: 0.06s;\n}\n\n@keyframes rotate624 {\n 0% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(3deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(-3deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(1deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n}\n\n@keyframes storm1261 {\n 0% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n\n 25% {\n transform: translate3d(4px, 0, 0) translateZ(0);\n }\n\n 50% {\n transform: translate3d(-3px, 0, 0) translateZ(0);\n }\n\n 75% {\n transform: translate3d(2px, 0, 0) translateZ(0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n}\n\n.btn-shine {\n border: 1px solid;\n overflow: hidden;\n position: relative;\n}\n\n.btn-shine span {\n z-index: 20;\n}\n\n.btn-shine:after {\n background: #38ef7d;\n content: \"\";\n height: 155px;\n left: -75px;\n opacity: 0.4;\n position: absolute;\n top: -50px;\n transform: rotate(35deg);\n transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);\n width: 50px;\n z-index: -10;\n}\n\n.btn-shine:hover:after {\n left: 120%;\n transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"40a462","snapshot":null,"tags":null,"title":"button by ShrinilDhorda","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":594,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".btn {\n font-size: 1.2rem;\n padding: 1rem 2.5rem;\n border: none;\n outline: none;\n border-radius: 0.4rem;\n cursor: pointer;\n text-transform: uppercase;\n background-color: rgb(14, 14, 26);\n color: rgb(234, 234, 234);\n font-weight: 700;\n transition: 0.6s;\n box-shadow: 0px 0px 60px #1f4c65;\n -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));\n}\n\n.btn:active {\n scale: 0.92;\n}\n\n.btn:hover {\n background: rgb(2,29,78);\n background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%);\n color: rgb(4, 4, 38);\n}"},{"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}"}]}},"actionData":null,"errors":null}