{"loaderData":{"0":null,"0-3":{"total":7307,"projects":[{"created":"2024-01-22T17:00:10.000Z","isPrivate":0,"projectId":"204827","snapshot":null,"tags":null,"title":"button by Programming-School-Pro-Coding","updated":"2024-01-22T17:00:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":344,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n --c1: #f6d365;\n --c2: #fda085;\n padding: 15px 30px;\n text-align: center;\n text-transform: uppercase;\n transition: 0.5s;\n background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%;\n color: white;\n border-radius: 20px;\n outline: none;\n}\n\nbutton:hover {\n --x: 100%;\n}"},{"created":"2024-01-22T17:00:10.000Z","isPrivate":0,"projectId":"152e99","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":17,"cssLen":1417,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background: #2389e9;\n padding: 30px;\n color: #FFFFFF;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n transition: all .5s ease-in-out;\n}\n\nbutton:hover {\n border-radius: 50%;\n transition: all .5s ease-in-out;\n}\n\nbutton:hover:before {\n margin-left: 0%;\n transform: rotate(24deg);\n}\n\nbutton::before {\n content: \"\";\n background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTczLjE4IDE5OC42MnYwbC0zOTYuMDkgNjMuNzE5Yy03Ljc1IDAuODU5MzgtOS40NzI3IDExLjE5NS0zLjQ0NTMgMTUuNWw5Ny4zMDEgNjguODgzLTE1LjUgMTEyLjhjLTAuODU5MzggNy43NSA3Ljc1IDEyLjkxNCAxMy43NzcgNy43NWw1NS4xMDktNDQuNzczIDI2LjY5MSAxMjQuODVjMS43MjI3IDcuNzUgMTEuMTk1IDkuNDcyNyAxNS41IDIuNTgybDIxNS4yNy0zMzguMzljMy40NDE0LTYuMDI3My0xLjcyNjYtMTMuNzc3LTguNjEzMy0xMi45MTR6bS0zNzIuODQgNzYuNjMzIDMxMy40Mi00OS45NDEtMjMzLjM0IDEwNy42M3ptNzQuMDUxIDE2NS4zMiAxMi45MTQtOTIuMTMzYzgwLjkzOC0zNy4wMjcgMTM5LjQ5LTY0LjU3OCAyMjkuMDQtMTA1LjkxLTEuNzE4OCAxLjcyMjctMC44NTkzNyAwLjg1OTM4LTI0MS45NSAxOTguMDR6bTg4LjY4OCA4Mi42Ni0yNC4xMDktMTEyLjggMTk5Ljc3LTE2Mi43NHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==\");\n height: 50px;\n background-repeat: no-repeat;\n position: absolute;\n width: 50px;\n transition: all .9s ease-in-out;\n background-size: 100%;\n}\n"},{"created":"2024-01-22T17:00:10.000Z","isPrivate":0,"projectId":"ddd893","snapshot":null,"tags":null,"title":"button by Progee45","updated":"2024-01-22T17:00:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":711,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n","css":".fancy-button {\n display: inline-block;\n padding: 10px 20px;\n border: none;\n background-color: #ff4081;\n color: #fff;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 2px;\n border-radius: 5px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.fancy-button:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.2);\n transform: skewX(-30deg);\n transition: left 0.3s ease-in-out;\n}\n\n.fancy-button:hover {\n transform: scale(1.1);\n}\n\n.fancy-button:hover:before {\n left: 100%;\n}"},{"created":"2024-01-22T17:00:10.000Z","isPrivate":0,"projectId":"55ba51","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":2406,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-60,\n.btn-60 *,\n.btn-60 :after,\n.btn-60 :before,\n.btn-60:after,\n.btn-60:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-60 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n}\n\n.btn-60:disabled {\n cursor: default;\n}\n\n.btn-60:-moz-focusring {\n outline: auto;\n}\n\n.btn-60 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-60 [hidden] {\n display: none;\n}\n\n.btn-60 {\n background: none;\n box-sizing: border-box;\n color: #000;\n display: block;\n font-weight: 900;\n -webkit-mask-image: none;\n padding: 1.5rem 4rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-60 span {\n background: #fff;\n border: 1px solid;\n border-radius: 999px;\n display: grid;\n inset: 0;\n place-items: center;\n pointer-events: none;\n position: absolute;\n}\n\n.btn-60:hover span {\n -webkit-animation: jello 0.8s;\n animation: jello 0.8s;\n}\n\n@-webkit-keyframes jello {\n 0%,\n 11.1%,\n to {\n transform: translateZ(0);\n }\n\n 22.2% {\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n\n 33.3% {\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n\n 44.4% {\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n\n 55.5% {\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n\n 66.6% {\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n\n 77.7% {\n transform: skewX(0.390625deg) skewY(0.390625deg);\n }\n\n 88.8% {\n transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n }\n}\n\n@keyframes jello {\n 0%,\n 11.1%,\n to {\n transform: translateZ(0);\n }\n\n 22.2% {\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n\n 33.3% {\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n\n 44.4% {\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n\n 55.5% {\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n\n 66.6% {\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n\n 77.7% {\n transform: skewX(0.390625deg) skewY(0.390625deg);\n }\n\n 88.8% {\n transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n }\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"b47fc8","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1098,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n border-radius: 8px;\n height: 40px;\n border: none;\n background: #ffcc00;\n /* Changed color to yellow */\n color: #333;\n /* Changed text color to dark gray */\n padding: 15px;\n box-shadow: 0 0.7065919983928324px 0.7065919983928324px -0.625px #00000026,\n 0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025,\n 0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023,\n 0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020,\n 0 13.646761411524492px 13.646761411524492px -3.125px #0000001b,\n 0 30px 30px -3.75px #0000000d;\n font-weight: bold;\n font-family: Montserrat;\n cursor: pointer;\n display: flex;\n align-items: center;\n transition: 150ms ease-in-out;\n}\n\n.button:active {\n scale: 0.95;\n background: #333;\n /* Changed background color to dark gray */\n color: #ffcc00;\n /* Changed text color to yellow */\n box-shadow: rgba(0, 0, 0, 0.26) 0px 0.637473px 1.14745px -1.125px,\n rgba(0, 0, 0, 0.24) 0px 1.93094px 3.4757px -2.25px,\n rgba(0, 0, 0, 0.192) 0px 5.10423px 9.18761px -3.375px,\n rgba(0, 0, 0, 0.03) 0px 16px 28.8px -4.5px;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"c8d10b","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":1400,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n text-decoration: none;\n color: white;\n font-weight: 600;\n font-size: 20px;\n text-transform: uppercase;\n letter-spacing: 2px;\n padding: 15px 30px;\n display: block;\n background-color: transparent;\n border: none;\n position: relative;\n cursor: pointer;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button span {\n background: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.button:hover span {\n -webkit-text-fill-color: white;\n}\n\n.button::before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: scaleY(2);\n border: 3px solid;\n border-image: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% );\n border-image-slice: 1;\n border-width: 2px 0 2px 0;\n opacity: 0;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n z-index: -1;\n}\n\n.button:hover::before {\n transform: scaleY(0);\n opacity: 1;\n}\n\n.button::after {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% );\n transform: scale(0);\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n z-index: -1;\n}\n\n.button:hover::after {\n transform: scaleY(1);\n}\n\n.button:active {\n scale: 0.90;\n}\n\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"59f78b","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4803,"cssLen":1699,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --btn-color: rgb(255, 0, 0);\n position: relative;\n padding: 16px 32px;\n font-family: Roboto, sans-serif;\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n color: white;\n background: none;\n border: none;\n outline: none;\n overflow: hidden;\n cursor: pointer;\n filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));\n transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.btn::before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n z-index: -1;\n width: 100%;\n height: 100%;\n background: var(--btn-color);\n border-radius: 24px;\n transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.btn span,\n .btn span span {\n display: inline-flex;\n vertical-align: middle;\n transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.btn span {\n transition-delay: 0.05s;\n}\n\n.btn span:first-child {\n padding-right: 7px;\n}\n\n.btn span span {\n margin-left: 8px;\n transition-delay: 0.1s;\n}\n\n.btn ul {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n display: flex;\n margin: 0;\n padding: 0;\n list-style-type: none;\n transform: translateY(-50%);\n}\n\n.btn ul li {\n flex: 1;\n}\n\n.btn ul li a {\n display: inline-flex;\n vertical-align: middle;\n transform: translateY(55px);\n transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.btn ul li a:hover {\n opacity: 0.5;\n}\n\n.btn:hover::before {\n transform: scale(1.2);\n}\n\n.btn:hover span,\n .btn:hover span span {\n transform: translateY(-55px);\n}\n\n.btn:hover ul li a {\n transform: translateY(0);\n}\n\n.btn:hover ul li:nth-child(1) a {\n transition-delay: 0.15s;\n}\n\n.btn:hover ul li:nth-child(2) a {\n transition-delay: 0.2s;\n}\n\n.btn:hover ul li:nth-child(3) a {\n transition-delay: 0.25s;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"567b34","snapshot":null,"tags":null,"title":"button by laminelawal","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":868,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\t\n

","css":".frame {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 400px;\n height: 400px;\n margin-top: -200px;\n margin-left: -200px;\n border-radius: 2px;\n box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);\n overflow: hidden;\n background: #fff;\n color: #333;\n font-family: 'Open Sans', Helvetica, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.center {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n}\n\nbutton {\n padding: 15px 15px;\n border: none;\n width: 170px;\n height: 55px;\n box-shadow: 15px 15px darkblue;\n cursor: pointer;\n transition: 0.5s ease;\n background: lightgray;\n font-size: 18px;\n font-weight: bolder;\n text-transform: uppercase;\n}\n\nbutton:hover {\n box-shadow: -15px -15px lightgray;\n transform: translate(15px, 15px);\n background: darkblue;\n color: white;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"b3b66d","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1029,"cssLen":968,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","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 0.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(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.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: #ea4c89;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n border: 1px solid #ffb4cf;\n background-color: rgba(216, 216, 216, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"65bc84","snapshot":null,"tags":null,"title":"button by Deri-Kurniawan","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":773,"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 padding: 12px 32px;\n font-size: 16px;\n font-weight: 700;\n text-transform: uppercase;\n color: #000;\n background-color: #fff;\n border: none;\n border-radius: 50px;\n overflow: hidden;\n z-index: 1;\n transition: all 0.3s ease-in-out;\n box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n}\n\n.button:hover {\n transform: scale(1.05);\n color: #fff;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n}\n\n.button:active {\n transform: scale(0.9);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(to right, #007bff, #00bfff);\n transition: all 0.4s ease-in-out;\n z-index: -1;\n border-radius: 50px;\n}\n\n.button:hover::before {\n left: 0;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"1354ed","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":417,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #323232;\n --bg-color-sub: #dedede;\n --bg-color: #eee;\n --main-color: #323232;\n position: relative;\n width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--bg-color);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(22px);\n color: var(--font-color);\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: var(--bg-color-sub);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: var(--main-color);\n}\n\n.button:hover {\n background: var(--bg-color);\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active {\n transform: translate(3px, 3px);\n box-shadow: 0px 0px var(--main-color);\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"24a0d2","snapshot":null,"tags":null,"title":"button by AKAspidey01","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":349,"cssLen":506,"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 align-items: center;\n gap: 10px;\n padding: 12px 15px;\n border-radius: 10px;\n border: none;\n overflow: hidden;\n background: rgb(164, 46, 194);\n color: #fff;\n}\n\n.button-text {\n transform: translateX(15px);\n font-size: 1.5em;\n font-weight: 700;\n transition-duration: 0.3s;\n}\n\n.iconer {\n transform: translateY(35px);\n transition-duration: 0.3s;\n}\n\n.button:hover .button-text {\n transform: translateX(0px);\n}\n\n.button:hover .iconer {\n transform: translateY(0px);\n}\n\n\n"}]}},"actionData":null,"errors":null}