{"loaderData":{"0":null,"0-3":{"total":7434,"projects":[{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"5c3c2b","snapshot":null,"tags":null,"title":"button by Leoodaviid","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":910,"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 overflow: hidden;\n padding: 1rem 2.5rem 1rem 2.5rem;\n border: 0;\n border-radius: 2rem;\n font-size: 18px;\n font-weight: 500;\n background: transparent;\n color: #1d1d1d;\n}\n\nbutton:hover {\n cursor: wait;\n}\n\nbutton > p {\n position: relative;\n z-index: 3;\n}\n\nbutton::before,\nbutton::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 300%;\n height: 100%;\n opacity: 0;\n}\n\nbutton::before {\n background: #79efff repeating-linear-gradient(50deg, transparent, transparent 10px, #71e0ef 10px, #71e0ef 20px);\n}\n\nbutton::after {\n z-index: 2;\n background: linear-gradient(#79efff 30%, transparent 100%);\n}\n\nbutton.loading::before,\nbutton.loading::after {\n opacity: 1;\n}\n\n@keyframes loading_49100 {\n 0% {\n translate: 25px 0;\n }\n\n 100% {\n translate: -30px 0;\n }\n}\n\nbutton.loading::before {\n animation: loading_49100 0.6s infinite linear;\n}"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"f45086","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":2225,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-31,\n.btn-31 *,\n.btn-31 :after,\n.btn-31 :before,\n.btn-31:after,\n.btn-31:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-31 {\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 font-weight: 900;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n}\n\n.btn-31:disabled {\n cursor: default;\n}\n\n.btn-31:-moz-focusring {\n outline: auto;\n}\n\n.btn-31 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-31 [hidden] {\n display: none;\n}\n\n.btn-31 {\n border-width: 1px;\n padding: 1rem 2rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-31:before {\n --progress: 100%;\n background: #fff;\n -webkit-clip-path: polygon(\n 100% 0,\n var(--progress) var(--progress),\n 0 100%,\n 100% 100%\n );\n clip-path: polygon(\n 100% 0,\n var(--progress) var(--progress),\n 0 100%,\n 100% 100%\n );\n content: \"\";\n inset: 0;\n position: absolute;\n transition: -webkit-clip-path 0.2s ease;\n transition: clip-path 0.2s ease;\n transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;\n}\n\n.btn-31:hover:before {\n --progress: 0%;\n}\n\n.btn-31 .text-container {\n display: block;\n overflow: hidden;\n position: relative;\n}\n\n.btn-31 .text {\n display: block;\n font-weight: 900;\n mix-blend-mode: difference;\n position: relative;\n}\n\n.btn-31:hover .text {\n -webkit-animation: move-up-alternate 0.3s ease forwards;\n animation: move-up-alternate 0.3s ease forwards;\n}\n\n@-webkit-keyframes move-up-alternate {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(80%);\n }\n\n 51% {\n transform: translateY(-80%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes move-up-alternate {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(80%);\n }\n\n 51% {\n transform: translateY(-80%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"c7a456","snapshot":null,"tags":null,"title":"button by HarryProCW","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":164,"cssLen":1079,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".rounded-full {\n border-radius: 9999px\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-blue-500 {\n --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-pink-500 {\n --tw-gradient-to: #ec4899 var(--tw-gradient-to-position)\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n@keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n.hover\\:animate-pulse:hover {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n\n.hover\\:brightness-110:hover {\n --tw-brightness: brightness(1.1);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"dcbb36","snapshot":null,"tags":null,"title":"button by abdulGitHb","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":737,"cssLen":4037,"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.z-10 {\n z-index: 10;\n}\n.h-\\[3em\\] {\n height: 3em;\n}\n.w-\\[9em\\] {\n width: 9em;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.rounded-\\[30px\\] {\n border-radius: 30px;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-violet-500 {\n --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-10\\% {\n --tw-gradient-from-position: 10%;\n}\n.via-sky-500 {\n --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.via-30\\% {\n --tw-gradient-via-position: 30%;\n}\n.to-pink-500 {\n --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);\n}\n.to-90\\% {\n --tw-gradient-to-position: 90%;\n}\n.bg-\\[length\\:400\\%\\] {\n background-size: 400%;\n}\n.text-center {\n text-align: center;\n}\n.text-\\[14px\\] {\n font-size: 14px;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute;\n}\n.before\\:-bottom-\\[5px\\]::before {\n content: var(--tw-content);\n bottom: -5px;\n}\n.before\\:-left-\\[5px\\]::before {\n content: var(--tw-content);\n left: -5px;\n}\n.before\\:-right-\\[5px\\]::before {\n content: var(--tw-content);\n right: -5px;\n}\n.before\\:-top-\\[5px\\]::before {\n content: var(--tw-content);\n top: -5px;\n}\n.before\\:-z-10::before {\n content: var(--tw-content);\n z-index: -10;\n}\n.before\\:rounded-\\[35px\\]::before {\n content: var(--tw-content);\n border-radius: 35px;\n}\n.before\\:bg-gradient-to-r::before {\n content: var(--tw-content);\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.before\\:from-violet-500::before {\n content: var(--tw-content);\n --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.before\\:from-10\\%::before {\n content: var(--tw-content);\n --tw-gradient-from-position: 10%;\n}\n.before\\:via-sky-500::before {\n content: var(--tw-content);\n --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.before\\:via-30\\%::before {\n content: var(--tw-content);\n --tw-gradient-via-position: 30%;\n}\n.before\\:to-pink-500::before {\n content: var(--tw-content);\n --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);\n}\n.before\\:bg-\\[length\\:400\\%\\]::before {\n content: var(--tw-content);\n background-size: 400%;\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-\\[1s\\]::before {\n content: var(--tw-content);\n transition-duration: 1s;\n}\n.before\\:ease-in-out::before {\n content: var(--tw-content);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: \"\";\n content: var(--tw-content);\n}\n.hover\\:bg-\\[length\\:100\\%\\]:hover {\n background-size: 100%;\n}\n.before\\:hover\\:bg-\\[length\\:10\\%\\]:hover::before {\n content: var(--tw-content);\n background-size: 10%;\n}\n.before\\:hover\\:blur-xl:hover::before {\n content: var(--tw-content);\n --tw-blur: blur(24px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)\n var(--tw-sepia) var(--tw-drop-shadow);\n}\n.focus\\:ring-violet-700:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(109 40 217 / var(--tw-ring-opacity));\n}\n.active\\:bg-violet-700:active {\n --tw-bg-opacity: 1;\n background-color: rgb(109 40 217 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"12b09e","snapshot":null,"tags":null,"title":"button by MikeAndrewDesigner","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":59,"cssLen":3278,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"#ui {\n font-weight: bolder;\n background: -webkit-linear-gradient(#B563FF, #535EFC, #0EC8EE);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n border-bottom: 4px solid transparent;\n border-image: linear-gradient(0.25turn, #535EFC, #0EC8EE, #0EC8EE);\n border-image-slice: 1;\n display: inline;\n}\n\n.button {\n position: relative;\n padding: 20px 30px;\n border-radius: 6px;\n border: none;\n color: #fff;\n font-weight: 00;\n cursor: pointer;\n font-size: 1.5em;\n font-weight: 600;\n background-color: #2c2c2c;\n transition: all 0.2s ease;\n}\n\n.button:hover {\n background: linear-gradient(144deg, #1e1e1e , 20%,#1e1e1e 50%,#1e1e1e );\n transition: all 0.2s ease;\n color: #fff;\n}\n\n.button:active {\n transform: scale(0.96);\n}\n\n.button:before,\n.button:after {\n position: absolute;\n content: \"\";\n width: 150%;\n left: 50%;\n height: 100%;\n transform: translateX(-50%);\n z-index: -1000;\n background-repeat: no-repeat;\n}\n\n.button:hover:before {\n top: -70%;\n background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),\n radial-gradient(circle, #535EFC 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),\n radial-gradient(circle, #0EC8EE 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #0EC8EE 20%, transparent 20%),\n radial-gradient(circle, #0EC8EE 20%, transparent 20%);\n background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,\n 10% 10%, 18% 18%;\n background-position: 50% 120%;\n animation: greentopBubbles 0.6s ease;\n}\n\n@keyframes greentopBubbles {\n 0% {\n background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,\n 40% 90%, 55% 90%, 70% 90%;\n }\n\n 50% {\n background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,\n 50% 50%, 65% 20%, 90% 30%;\n }\n\n 100% {\n background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,\n 50% 40%, 65% 10%, 90% 20%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}\n\n.button:hover::after {\n bottom: -70%;\n background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #535EFC 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),\n radial-gradient(circle, #535EFC 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%),\n radial-gradient(circle, #535EFC 20%, transparent 20%),\n radial-gradient(circle, #7d2ae8 20%, transparent 20%);\n background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;\n background-position: 50% 0%;\n animation: greenbottomBubbles 0.6s ease;\n}\n\n@keyframes greenbottomBubbles {\n 0% {\n background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,\n 70% -10%, 70% 0%;\n }\n\n 50% {\n background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,\n 105% 0%;\n }\n\n 100% {\n background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,\n 110% 10%;\n background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;\n }\n}"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"411d7a","snapshot":null,"tags":null,"title":"button by faxriddin20","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":536,"cssLen":410,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".download-btn {\n border: 2px solid rgb(168, 38, 255);\n background-color: white;\n width: 50px;\n height: 50px;\n border-radius: 10px;\n position: relative;\n z-index: 1;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n.download-btn svg {\n width: 25px;\n height: 25px;\n transition: all 0.3s ease;\n}\n.download-btn:hover svg {\n fill: white;\n}\n.download-btn:hover {\n background-color: rgb(168, 38, 255);\n}\n"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"1419c8","snapshot":null,"tags":null,"title":"button by kennyotsu-monochromia","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1124,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n border-radius: 8px;\n width: 140px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 0px 15px;\n border: none;\n color: white;\n position: relative;\n cursor: pointer;\n font-weight: 700;\n transition-duration: .2s;\n background-color: var(--ch-black);\n}\n\n.button:before, .button:after {\n content: '';\n position: absolute;\n left: -2px;\n top: -2px;\n border-radius: 10px;\n background: linear-gradient(45deg, \n var(--ch-black), var(--eer-black),\n var(--night-rider), var(--ch-white), var(--night-rider), \n\tvar(--eer-black), var(--ch-black),var(--ch-black));\n background-size: 400%;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n z-index: -1;\n animation: steam 20s linear infinite;\n}\n\n@keyframes steam {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\n.button:after {\n filter: blur(50px);\n}\n\n"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"3b625d","snapshot":null,"tags":null,"title":"button by Brian-Pob","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":615,"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 z-index: 1;\n overflow: hidden;\n border: none;\n border-radius: 5px;\n padding: 1rem 2rem;\n font-size: 20px;\n font-family: sans-serif;\n background-color: purple;\n color: white;\n transition: all .7s ease-in-out;\n}\n\nbutton:hover {\n color: purple;\n}\n\nbutton::before {\n position: absolute;\n display: inline-block;\n top: 0;\n left: 0;\n z-index: -1;\n border-radius: 5px;\n width: 0;\n height: 100%;\n content: \"\";\n background-color: white;\n transition: all 700ms ease-in-out;\n}\n\nbutton:hover::before {\n left: unset;\n right: 0;\n width: 100%;\n transform: rotate(180deg);\n}"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"45ece4","snapshot":null,"tags":null,"title":"button by ankul003","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1229,"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: 15px;\n --border-width: 4px;\n appearance: none;\n position: relative;\n padding: 1em 2em;\n border: 0;\n background-color: #212121;\n font-family: \"Roboto\", Arial, \"Segoe UI\", sans-serif;\n font-size: 18px;\n font-weight: 500;\n color: #fff;\n z-index: 2;\n}\n\nbutton::after {\n --m-i: linear-gradient(#000, #000);\n --m-o: content-box, padding-box;\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n padding: var(--border-width);\n border-radius: var(--border-radius);\n background-image: conic-gradient(\n\t\t#D1ABE6,\n\t\t#9B59B6,\n\t\t#E5D9EC,\n\t\t#FFAFCC,\n\t\t#BDE0FE,\n\t\t#655adc,\n\t\t#488cfb\n );\n -webkit-mask-image: var(--m-i), var(--m-i);\n mask-image: var(--m-i), var(--m-i);\n -webkit-mask-origin: var(--m-o);\n mask-origin: var(--m-o);\n -webkit-mask-clip: var(--m-o);\n mask-composite: exclude;\n -webkit-mask-composite: destination-out;\n filter: hue-rotate(0);\n animation: rotate-hue linear 500ms infinite;\n animation-play-state: paused;\n}\n\nbutton:hover::after {\n animation-play-state: running;\n}\n\n@keyframes rotate-hue {\n to {\n filter: hue-rotate(1turn);\n }\n}\n\nbutton,\nbutton::after {\n box-sizing: border-box;\n}\n\nbutton:active {\n --border-width: 5px;\n}"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"42e00a","snapshot":null,"tags":null,"title":"button by ArturCodeCraft","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":979,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* ============================ */\nbutton {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n}\n/* ============================ */\n.small-button {\n min-width: 104px;\n height: 40px;\n border-radius: 40px;\n background: #000;\n padding: 12px 28px;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n font-size: 13px;\n font-weight: 400;\n line-height: 1;\n transition: background .2s ease-in-out, color .2s ease-in-out;\n position: relative;\n}\n\n.small-button::before {\n content: '';\n width: 100%;\n height: 100%;\n border-radius: 40px;\n background: linear-gradient(69deg, #c3aab2 -4.77%, #9ec 46.72%, #80c0c8 90.23%, #4B8bfa 134.46%);\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: -1;\n transition: opacity .2s ease-in-out;\n}\n\n.small-button:hover {\n background: transparent;\n color: #000;\n}\n\n.small-button:hover::before {\n opacity: 1;\n}"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"c3dfbf","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":170,"cssLen":1646,"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 font-family: inherit;\n font-size: 18px;\n border-radius: 40em;\n width: 8em;\n height: 3em;\n z-index: 1;\n color: white;\n overflow: hidden;\n border: none;\n}\n\nbutton .text {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n line-height: 3em;\n border-radius: 40em;\n border: none;\n background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));\n z-index: 1;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\nbutton .blob {\n position: absolute;\n z-index: -1;\n border-radius: 5em;\n width: 5em;\n height: 3em;\n transition: transform .3s ease-in-out, background .3s ease-in-out;\n}\n\n/* CHANGED COLORS */\nbutton .blob:nth-child(2) {\n left: 0em;\n top: 0;\n background: #209CEE;\n /* changed */\n}\n\n/* CHANGED COLORS */\nbutton .blob:nth-child(3) {\n left: 1.8em;\n top: 0;\n z-index: -1;\n background: #4DAF7C;\n /* changed */\n}\n\n/* CHANGED COLORS */\nbutton .blob:nth-child(4) {\n left: 4em;\n top: -1em;\n background: #F0916F;\n /* changed */\n}\n\n/* CHANGED COLORS */\nbutton .blob:nth-child(5) {\n left: 4.3em;\n top: 1.6em;\n background: #a8c7a8;\n /* changed */\n}\n\n/* CHANGED COLORS */\nbutton:hover .blob:nth-child(2) {\n background: #a8c7a8;\n /* changed */\n}\n\n/* CHANGED COLORS */\nbutton:hover .blob:nth-child(3) {\n background: #F0916F;\n /* changed */\n}\n\n/* CHANGED COLORS */\nbutton:hover .blob:nth-child(4) {\n background: #4DAF7C;\n /* changed */\n}\n\n/* CHANGED COLORS */\nbutton:hover .blob:nth-child(5) {\n background: #209CEE;\n /* changed */\n}\n\nbutton:hover .blob {\n transform: scale(1.3);\n}\n\nbutton:active {\n border: 2px solid white;\n}"},{"created":"2024-01-22T17:00:17.000Z","isPrivate":0,"projectId":"e50ba1","snapshot":null,"tags":null,"title":"button by Cybercom682","updated":"2024-01-22T17:00:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":845,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n border: 0;\n padding: 1rem;\n background-color: orange;\n color: white;\n position: relative;\n}\n\n.button:hover {\n background-color: orangered;\n cursor: pointer;\n transition: all 0.15s ease-in;\n}\n\n.button:hover::before {\n content: \"\";\n width: 100%;\n height: 100%;\n background-color: cadetblue;\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n animation: swingLeft 0.2s ease-in forwards;\n}\n\n.button:hover::after {\n content: \"\";\n width: 100%;\n height: 100%;\n background-color: purple;\n position: absolute;\n z-index: -1;\n bottom: 0;\n right: 0;\n animation: swingRight 0.2s ease-in forwards;\n}\n\n@keyframes swingLeft {\n 0% {\n top: 0;\n left: 0;\n }\n\n 100% {\n top: 5px;\n left: 5px;\n }\n}\n\n@keyframes swingRight {\n 0% {\n bottom: 0;\n right: 0;\n }\n\n 100% {\n bottom: 5px;\n right: 5px;\n }\n}"}]}},"actionData":null,"errors":null}