{"loaderData":{"0":null,"0-3":{"total":7307,"projects":[{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"7e090d","snapshot":null,"tags":null,"title":"button by jdm-encompass","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1333,"cssLen":643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"
","css":".button {\n background-color: #ffffff;\n border: none;\n border-radius: 50%;\n box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);\n animation: sway 2s infinite alternate;\n width: 70px;\n height: 70px;\n display: flex;\n justify-content: center;\n align-items: center;\n perspective: 500px;\n transition: transform 0.5s, box-shadow 0.5s;\n}\n\n.button:hover {\n transform: scale(1.5) rotate(-360deg) translateY(-1em);\n box-shadow: 0 0 20px 0 rgba(29, 161, 242, 0.5);\n}\n\n.icon {\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));\n transition: transform 0.5s;\n}\n\n.icon:hover {\n transform: scale(8);\n filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.9))\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"189ff9","snapshot":null,"tags":null,"title":"button by SmookyDev","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1407,"cssLen":9461,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Hover Me\n\n","css":".relative {\n position: relative;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.rounded-e {\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-rose-900 {\n --tw-gradient-from: #881337 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(136 19 55 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.to-pink-700 {\n --tw-gradient-to: #be185d var(--tw-gradient-to-position);\n}\n.px-10 {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-700 {\n transition-duration: 700ms;\n}\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute;\n}\n.before\\:inset-0::before {\n content: var(--tw-content);\n inset: 0px;\n}\n.before\\:z-20::before {\n content: var(--tw-content);\n z-index: 20;\n}\n.before\\:flex::before {\n content: var(--tw-content);\n display: flex;\n}\n.before\\:origin-bottom-left::before {\n content: var(--tw-content);\n transform-origin: bottom left;\n}\n.before\\:translate-x-0::before {\n content: var(--tw-content);\n --tw-translate-x: 0px;\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.before\\:items-center::before {\n content: var(--tw-content);\n align-items: center;\n}\n.before\\:justify-center::before {\n content: var(--tw-content);\n justify-content: center;\n}\n.before\\:rounded-e::before {\n content: var(--tw-content);\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n.before\\:bg-pink-600::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(219 39 119 / var(--tw-bg-opacity));\n}\n.before\\:bg-gradient-to-l::before {\n content: var(--tw-content);\n background-image: linear-gradient(to left, var(--tw-gradient-stops));\n}\n.before\\:from-rose-700::before {\n content: var(--tw-content);\n --tw-gradient-from: #be123c var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(190 18 60 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.before\\:to-pink-600::before {\n content: var(--tw-content);\n --tw-gradient-to: #db2777 var(--tw-gradient-to-position);\n}\n.before\\:transition-all::before {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms;\n}\n.before\\:content-\\[\\'Hover_ME\\'\\]::before {\n --tw-content: \"Hover ME\";\n content: var(--tw-content);\n}\n.before\\:\\[clip-path\\:polygon\\(26\\%_0\\2c\n _38\\%_17\\%\\2c\n _25\\%_32\\%\\2c\n _41\\%_66\\%\\2c\n _27\\%_81\\%\\2c\n _50\\%_100\\%\\2c\n _0_100\\%\\2c\n _0\\%_70\\%\\2c\n _0\\%_35\\%\\2c\n _0_0\\)\\]::before {\n content: var(--tw-content);\n -webkit-clip-path: polygon(\n 26% 0,\n 38% 17%,\n 25% 32%,\n 41% 66%,\n 27% 81%,\n 50% 100%,\n 0 100%,\n 0% 70%,\n 0% 35%,\n 0 0\n );\n clip-path: polygon(\n 26% 0,\n 38% 17%,\n 25% 32%,\n 41% 66%,\n 27% 81%,\n 50% 100%,\n 0 100%,\n 0% 70%,\n 0% 35%,\n 0 0\n );\n}\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n}\n.after\\:inset-0::after {\n content: var(--tw-content);\n inset: 0px;\n}\n.after\\:z-20::after {\n content: var(--tw-content);\n z-index: 20;\n}\n.after\\:flex::after {\n content: var(--tw-content);\n display: flex;\n}\n.after\\:origin-bottom-right::after {\n content: var(--tw-content);\n transform-origin: bottom right;\n}\n.after\\:translate-x-0::after {\n content: var(--tw-content);\n --tw-translate-x: 0px;\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.after\\:items-center::after {\n content: var(--tw-content);\n align-items: center;\n}\n.after\\:justify-center::after {\n content: var(--tw-content);\n justify-content: center;\n}\n.after\\:rounded-e::after {\n content: var(--tw-content);\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n.after\\:bg-pink-600::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(219 39 119 / var(--tw-bg-opacity));\n}\n.after\\:bg-gradient-to-r::after {\n content: var(--tw-content);\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.after\\:from-rose-700::after {\n content: var(--tw-content);\n --tw-gradient-from: #be123c var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(190 18 60 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.after\\:to-pink-600::after {\n content: var(--tw-content);\n --tw-gradient-to: #db2777 var(--tw-gradient-to-position);\n}\n.after\\:transition-all::after {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.after\\:duration-500::after {\n content: var(--tw-content);\n transition-duration: 500ms;\n}\n.after\\:content-\\[\\'Hover_ME\\'\\]::after {\n --tw-content: \"Hover ME\";\n content: var(--tw-content);\n}\n.after\\:\\[clip-path\\:polygon\\(50\\%_0\\%\\2c\n _100\\%_0\\2c\n _100\\%_34\\%\\2c\n _100\\%_100\\%\\2c\n _77\\%_87\\%\\2c\n _88\\%_62\\%\\2c\n _64\\%_75\\%\\2c\n _67\\%_50\\%\\2c\n _48\\%_32\\%\\2c\n _82\\%_18\\%\\)\\]::after {\n content: var(--tw-content);\n -webkit-clip-path: polygon(\n 50% 0%,\n 100% 0,\n 100% 34%,\n 100% 100%,\n 77% 87%,\n 88% 62%,\n 64% 75%,\n 67% 50%,\n 48% 32%,\n 82% 18%\n );\n clip-path: polygon(\n 50% 0%,\n 100% 0,\n 100% 34%,\n 100% 100%,\n 77% 87%,\n 88% 62%,\n 64% 75%,\n 67% 50%,\n 48% 32%,\n 82% 18%\n );\n}\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\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.hover\\:duration-1000:hover {\n transition-duration: 1000ms;\n}\n.before\\:hover\\:translate-x-0:hover::before {\n content: var(--tw-content);\n --tw-translate-x: 0px;\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.before\\:hover\\:-rotate-\\[45deg\\]:hover::before {\n content: var(--tw-content);\n --tw-rotate: -45deg;\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.before\\:hover\\:skew-y-6:hover::before {\n content: var(--tw-content);\n --tw-skew-y: 6deg;\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.before\\:hover\\:transition-all:hover::before {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.before\\:hover\\:duration-700:hover::before {\n content: var(--tw-content);\n transition-duration: 700ms;\n}\n.before\\:hover\\:content-\\[\\'SMOOKY\\'\\]:hover::before {\n --tw-content: \"SMOOKY\";\n content: var(--tw-content);\n}\n.after\\:hover\\:-translate-x-1:hover::after {\n content: var(--tw-content);\n --tw-translate-x: -0.25rem;\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.after\\:hover\\:rotate-\\[100deg\\]:hover::after {\n content: var(--tw-content);\n --tw-rotate: 100deg;\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.after\\:hover\\:skew-y-6:hover::after {\n content: var(--tw-content);\n --tw-skew-y: 6deg;\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.after\\:hover\\:scale-x-50:hover::after {\n content: var(--tw-content);\n --tw-scale-x: 0.5;\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.after\\:hover\\:transition-all:hover::after {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.after\\:hover\\:duration-700:hover::after {\n content: var(--tw-content);\n transition-duration: 700ms;\n}\n.after\\:hover\\:content-\\[\\'SMOOKY_DEV\\'\\]:hover::after {\n --tw-content: \"SMOOKY DEV\";\n content: var(--tw-content);\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"2ae3c9","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1094,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n width: 150px;\n height: 50px;\n border: none;\n color: white;\n font-weight: 600;\n font-size: 13.5px;\n position: relative;\n overflow: hidden;\n border-radius: 40px;\n cursor: pointer;\n background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);\n background-size: 1000% 1000%;\n animation: gradient 5s ease infinite;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.247);\n transition-duration: .1s;\n}\n/* Button's gradient animation */\n@keyframes gradient {\n 0% {\n background-position: 0 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0 50%;\n }\n}\n/* Effect on Hover*/\n.Btn::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 100%;\n left: -70px;\n top: 0;\n background-color: rgba(214, 199, 255, 0.329);\n filter: blur(10px);\n transition-duration: .3s;\n border-top-left-radius: 50%;\n border-bottom-right-radius: 50%;\n}\n\n.Btn:hover::before {\n transform: translateX(250px);\n transition-duration: .3s;\n}\n/* Effect on click */\n.Btn:active {\n transform: translate(2px,2px);\n transition-duration: .1s;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"b03ee8","snapshot":null,"tags":null,"title":"button by Df12345677","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":705,"cssLen":736,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 60px;\n width: 200px;\n background-color: #132233;\n border: 2px solid rgb(182, 128, 128);\n color: #eee;\n transition: .6s;\n font-size: 15px;\n border-radius: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n /* padding: 20px; */\n overflow: hidden;\n}\n\n.button span {\n transform: translateX(10px);\n transition: .5s;\n}\n\n.button svg {\n transform: translateX(-300px);\n transition: .6s;\n z-index: 3;\n height: 20px;\n}\n\n.button:hover {\n width: 60px;\n background-color: rgba(51, 34, 51, 0.815);\n box-shadow: 20px 20px 96px #bebebe,-20px -20px 96px #ffffff;\n}\n\n.button:hover svg {\n transform: translateX(-5px);\n}\n\n.button:hover span {\n transform: translateY(70px);\n font-size: .1rem;\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"3bfcde","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":640,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me!","css":"/* ============================ */\na {\n text-decoration: none;\n}\n/* ============================ */\n.menu__link {\n color: #fff;\n line-height: 2;\n position: relative;\n padding-right: 4px;\n}\n\n.menu__link:hover {\n text-decoration: underline;\n}\n\n.menu__link::before {\n content: '';\n width: 6px;\n height: 6px;\n border-top: solid 2px #fff;\n border-right: solid 2px #fff;\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translateY(-50%) rotate(45deg);\n transition: transform .4s;\n}\n\n.menu__link:hover::before {\n transform: translateX(4px) translateY(-50%) rotate(45deg);\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"1ace8a","snapshot":null,"tags":null,"title":"button by MrD4rio","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1451,"cssLen":1104,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-family: inherit;\n font-size: 18px;\n background: linear-gradient(to bottom, #4f4dd9 0%,#2b60aa 100%);\n color: white;\n padding: 0.8em 1.2em;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 25px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);\n transition: all 0.3s;\n}\n\nbutton:hover {\n transform: translateY(-3px);\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);\n}\n\nbutton:active {\n transform: scale(0.95);\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);\n}\n\nbutton span {\n display: block;\n margin-left: 0.4em;\n transition: all 0.3s;\n}\n\nbutton svg {\n width: 18px;\n height: 18px;\n fill: white;\n transition: all 0.3s;\n}\n\nbutton .svg-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.2);\n margin-right: 0.5em;\n transition: all 0.3s;\n}\n\nbutton:hover .svg-wrapper {\n background-color: rgba(255, 255, 255, 0.5);\n}\n\nbutton:hover svg {\n transform: rotate(360deg);\n}\n\n/* credits to uiverse.io/profile/eirikvold */"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"d3126d","snapshot":null,"tags":null,"title":"button by AyuuLima","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1044,"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 width: 120px;\n height: 40px;\n background-color: rgb(0, 0, 0);\n display: flex;\n align-items: center;\n color: rgb(255, 255, 255);\n flex-direction: column;\n justify-content: center;\n border: none;\n padding: 20px;\n gap: 120px;\n border-radius: 10px;\n cursor: pointer;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n left: 3px;\n top: -4px;\n margin: auto;\n width: -128px;\n height: -48px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #10d32a 0%, rgb(119, 235, 235) 100%);\n z-index: -10;\n pointer-events: visiblePainted;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.button::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #00ff22 0%, rgb(0, 250, 250) 100%);\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(15px);\n}\n\n.button:hover::after {\n filter: blur(40px);\n}\n\n.button:hover::before {\n transform: rotate(-180deg);\n}\n\n.button:active::before {\n scale: 0.7;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"37e423","snapshot":null,"tags":null,"title":"button by Tsiangana","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":873,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 140px;\n height: 45px;\n border-radius: 30em;\n position: relative;\n overflow: hidden;\n color: #fff;\n font-family: Roboto, sans-serif;\n font-weight: 600;\n font-size: 15px;\n line-height: 1;\n cursor: pointer;\n z-index: 1;\n background: #ff135a;\n border: 3px solid #fff;\n box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;\n transition: 0.6s ease-in;\n}\n\n.button:hover {\n background: #fff;\n}\n\n.button .two {\n display: none;\n}\n\n.button::before {\n content: \"\";\n width: 0;\n height: 50px;\n border-radius: 30em;\n position: absolute;\n top: 0;\n left: 0;\n background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);\n transition: 0.5s ease;\n display: block;\n z-index: -1;\n}\n\n.button:hover::before {\n width: 140px;\n transition: 3s linear;\n}\n\n.button:hover .one {\n display: none;\n}\n\n.button:hover .two {\n display: inline;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"0ab866","snapshot":null,"tags":null,"title":"button by Dear31","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":719,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 12px 32px;\n border-radius: 10px;\n border: 3px black solid;\n box-shadow: 2px 2px 1px;\n font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n font-weight: 700;\n font-size: 17px;\n background-color: #01aaba68;\n overflow: hidden;\n position: relative;\n z-index: 10;\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n background-color: #199fab;\n width: 0px;\n height: 0px;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: all .3s ease-in;\n z-index: -1;\n}\n\nbutton:hover::after {\n transform-origin: center;\n transition: all .3s ease-in;\n width: 200px;\n height: 200px;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"02728a","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":100,"cssLen":953,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n cursor: pointer;\n --c: #0ea5e9;\n padding: 12px 28px;\n margin: 1em;\n position: relative;\n min-width: 12em;\n background: transparent;\n font-size: 12px;\n font-weight: bold;\n color: var(--c);\n text-align: center;\n text-transform: uppercase;\n font-family: sans-serif;\n letter-spacing: 0.1em;\n border: 2px solid var(--c);\n border-radius: 8px;\n overflow: hidden;\n z-index: 1;\n transition: 0.5s;\n}\n\n.button span {\n position: absolute;\n width: 25%;\n height: 100%;\n background-color: var(--c);\n transform: translateY(150%);\n border-radius: 50%;\n left: calc((var(--n) - 1) * 25%);\n transition: 0.5s;\n transition-delay: calc((var(--n) - 1) * 0.1s);\n z-index: -1;\n}\n\n.button:hover {\n color: black;\n}\n\n.button:hover span {\n transform: translateY(0) scale(2);\n}\n\n.button span:nth-child(1) {\n --n: 1;\n}\n\n.button span:nth-child(2) {\n --n: 2;\n}\n\n.button span:nth-child(3) {\n --n: 3;\n}\n\n.button span:nth-child(4) {\n --n: 4;\n}\n"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"39c05b","snapshot":null,"tags":null,"title":"button by KSAplay","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":767,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n padding: 0.8em 2em 0.8em 2.5em;\n font-size: 15px;\n font-weight: bold;\n border-radius: 15px;\n color: #f6fff6;\n letter-spacing: 0.3em;\n text-shadow: -2px 2px 5px #33fd30;\n background-color: transparent;\n border: 2px solid #bbfeb1;\n box-shadow: 0 0 0px 1px #42f112,\n 0 0 10px 2px #33fd30,\n inset 0 0 0px 1px #42f112,\n inset 0 0 10px 2px #33fd30;\n transition: 100ms;\n}\n\n.btn:hover {\n box-shadow: 0 0 0px 1px #42f112,\n 0 0 10px 2px #33fd30,\n inset 0 0 0px 1px #42f112,\n inset 0 0 30px 2px #33fd30;\n text-shadow: 0 0 10px #33fd30;\n transform: translateY(-5px);\n}\n\n.btn:active {\n box-shadow: 0 0 0px 1px #42f112,\n 0 0 25px 2px #33fd30,\n inset 0 0 0px 1px #42f112,\n inset 0 0 30px 2px #33fd30;\n transform: translateY(1px);\n}"},{"created":"2024-01-22T17:00:07.000Z","isPrivate":0,"projectId":"cbbde6","snapshot":null,"tags":null,"title":"button by htwarriors108","updated":"2024-01-22T17:00:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":663,"cssLen":1434,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":"button {\n background-color: #fff;\n position: relative;\n list-style: none;\n width: 60px;\n height: 60px;\n border-radius: 60px;\n cursor: pointer;\n box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.5s;\n border: none;\n}\n\nbutton:active {\n scale: 1.2;\n}\n\nbutton:hover {\n width: 180px;\n box-shadow: 0px 10px 25px rgba(0, 0, 0, 0);\n}\n\nbutton::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 50px;\n background: linear-gradient(45deg, var(--i), var(--j));\n opacity: 0;\n transition: 0.5s;\n}\n\nbutton:hover::before {\n opacity: 1;\n}\n\nbutton::after {\n content: '';\n position: absolute;\n top: 10px;\n width: 100%;\n height: 100%;\n border-radius: 60px;\n background: linear-gradient(45deg, var(--i), var(--j));\n filter: blur(15px);\n transition: 0.5s;\n z-index: -1;\n opacity: 0;\n}\n\nbutton:hover::after {\n opacity: 0.5;\n}\n\nbutton svg {\n color: #777;\n width: auto;\n height: 30px;\n transition: 0.5s;\n transition-delay: 0.25s;\n}\n\nbutton:hover svg {\n transform: scale(0);\n color: #fff;\n transition-delay: 0s;\n}\n\nbutton span {\n position: absolute;\n}\n\nbutton .title {\n color: #fff;\n font-size: 1.3em;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n transform: scale(0);\n transition: 0.5s;\n transition-delay: 0s;\n font-weight: 600;\n}\n\nbutton:hover .title {\n transform: scale(1);\n transition-delay: 0.25s;\n}"}]}},"actionData":null,"errors":null}