{"loaderData":{"0":null,"0-2":{"total":7067,"projects":[{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"2bc0e5","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":1325,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-55,\n.btn-55 *,\n.btn-55 :after,\n.btn-55 :before,\n.btn-55:after,\n.btn-55:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-55 {\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-55:disabled {\n cursor: default;\n}\n\n.btn-55:-moz-focusring {\n outline: auto;\n}\n\n.btn-55 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-55 [hidden] {\n display: none;\n}\n\n.btn-55 {\n background: linear-gradient(90deg, blue, red);\n border-radius: 999px;\n box-sizing: border-box;\n color: #000;\n display: block;\n font-weight: 900;\n overflow: hidden;\n padding: 1.8rem 5rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-55 span {\n background: #1e293b;\n border-radius: 999px;\n color: #fff;\n display: grid;\n inset: 5px;\n place-items: center;\n position: absolute;\n transition: background 0.3s;\n}\n\n.btn-55:hover span {\n background: none;\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"769a83","snapshot":null,"tags":null,"title":"button by bociKond","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":184,"cssLen":1643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --white: #e8e8e8;\n --border-clr: #fff;\n --button-bg-clr: #151515;\n display: grid;\n grid-template-rows: 80% 20%;\n background-color: var(--button-bg-clr);\n border-width: 10px 3px 3px 3px;\n border-color: var(--border-clr);\n border-style: solid;\n font-family: sans-serif;\n font-weight: bolder;\n font-size: 1.5rem;\n cursor: pointer;\n transition: 350ms ease-in-out;\n}\n\nbutton:hover {\n --border-clr: #f55c1b;\n transform: translate(-7px, -7px);\n}\n\nbutton:hover .top::before {\n filter: saturate(1);\n opacity: 1;\n}\n\nbutton:hover .top::after {\n opacity: 0;\n}\n\n.top {\n color: var(--white);\n /* background-color: white; */\n margin: 0.75rem 0.5rem;\n padding: 0.5rem 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n isolation: isolate;\n z-index: 1;\n}\n\n.top::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: #f55c1b;\n background: linear-gradient(0deg, #f55c1b 0%, #ffffff 100%);\n filter: saturate(0);\n z-index: -2;\n transition: 350ms ease-in-out;\n opacity: 0;\n}\n\n.top .before {\n position: absolute;\n inset: 2px;\n z-index: -1;\n background-color: var(--button-bg-clr);\n}\n\n.top::after {\n content: \"\";\n position: absolute;\n inset: 0px;\n background: var(--button-bg-clr);\n filter: saturate(0);\n z-index: -1;\n transition: 350ms ease-in-out;\n border: 2px solid var(--white);\n transition: 350ms ease-in-out;\n}\n\n.bottom {\n background: repeating-conic-gradient(\n from 45deg,\n #616161 0% 25%,\n #3f3f3f 0% 50%\n );\n background-size: 16px 16px;\n background-color: #3f3f3f;\n background-position: center;\n width: 100%;\n height: 100%;\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"09f4d1","snapshot":null,"tags":null,"title":"button by DeepanshuKant","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":820,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".btn {\n position: relative;\n padding: 1rem 2.5rem;\n color: #ffd739;\n font-size: 1em;\n background-color: #27045b;\n outline: none;\n border: none;\n font-weight: bold;\n border-radius: 5px;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n transition-property: all;\n transition-duration: 0.3s;\n cursor: pointer;\n}\n\n.btn:hover {\n background-color: #6807f9;\n box-shadow: 0px 14px 56px -11px #6807f9;\n}\n\n.btn::before {\n content: \"\";\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: white;\n border-radius: 100px;\n right: 2rem;\n bottom: 37%;\n animation: 0.5s both ease-in-out infinite;\n}\n\n.btn:hover::before {\n animation-name: bounce_591;\n transition: all 0.3s ease;\n}\n\n@keyframes bounce_591 {\n 0% {\n bottom: 37%;\n }\n\n 50% {\n bottom: 70%;\n }\n\n 100% {\n bottom: 37%;\n }\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"2943f4","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":503,"cssLen":506,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 100px;\n height: 32px;\n background-color: #4267B2;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 0 8px;\n justify-content: space-between;\n transition: all 0.3s;\n}\n\nbutton:hover {\n opacity: 0.85;\n transform: translateY(-4px);\n}\n\nbutton .label {\n font-size: 12px;\n line-height: 32px;\n color: #fff;\n font-weight: 700;\n letter-spacing: 1px;\n margin: 0 auto;\n}\n\nbutton svg {\n fill: #fff;\n width: 25px;\n height: 25px;\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"6e3a40","snapshot":null,"tags":null,"title":"button by themrsami","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":974,"cssLen":4928,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n Loading...\n \n \n Loading\n\n","css":".\\!absolute {\n position: absolute !important;\n}\n.\\!-m-px {\n margin: -1px !important;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.inline-block {\n display: inline-block;\n}\n.\\!h-px {\n height: 1px !important;\n}\n.h-3 {\n height: 0.75rem;\n}\n.\\!w-px {\n width: 1px !important;\n}\n.w-3 {\n width: 0.75rem;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.\\!overflow-hidden {\n overflow: hidden !important;\n}\n.\\!whitespace-nowrap {\n white-space: nowrap !important;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.\\!border-0 {\n border-width: 0px !important;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-current {\n border-color: currentColor;\n}\n.border-r-transparent {\n border-right-color: transparent;\n}\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.\\!p-0 {\n padding: 0px !important;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-2\\.5 {\n padding-top: 0.625rem;\n}\n.align-\\[-0\\.125em\\] {\n vertical-align: -0.125em;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.leading-normal {\n line-height: 1.5;\n}\n.text-neutral-50 {\n --tw-text-opacity: 1;\n color: rgb(250 250 250 / var(--tw-text-opacity));\n}\n.shadow-\\[0_4px_9px_-4px_rgba\\(51\\2c 45\\2c 45\\2c 0\\.7\\)\\] {\n --tw-shadow: 0 4px 9px -4px rgba(51, 45, 45, 0.7);\n --tw-shadow-colored: 0 4px 9px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, fill, stroke,\n opacity, box-shadow, transform, filter, -webkit-text-decoration-color,\n -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n 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.duration-150 {\n transition-duration: 150ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.\\!\\[clip\\:rect\\(0\\2c 0\\2c 0\\2c 0\\)\\] {\n clip: rect(0, 0, 0, 0) !important;\n}\n.hover\\:bg-green-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity));\n}\n.hover\\:shadow-\\[0_8px_9px_-4px_rgba\\(51\\2c\n 45\\2c\n 45\\2c\n 0\\.2\\)\\2c\n 0_4px_18px_0_rgba\\(51\\2c\n 45\\2c\n 45\\2c\n 0\\.1\\)\\]:hover {\n --tw-shadow: 0 8px 9px -4px rgba(51, 45, 45, 0.2),\n 0 4px 18px 0 rgba(51, 45, 45, 0.1);\n --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color),\n 0 4px 18px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:bg-green-800:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(22 101 52 / var(--tw-bg-opacity));\n}\n.focus\\:shadow-\\[0_8px_9px_-4px_rgba\\(51\\2c\n 45\\2c\n 45\\2c\n 0\\.2\\)\\2c\n 0_4px_18px_0_rgba\\(51\\2c\n 45\\2c\n 45\\2c\n 0\\.1\\)\\]:focus {\n --tw-shadow: 0 8px 9px -4px rgba(51, 45, 45, 0.2),\n 0 4px 18px 0 rgba(51, 45, 45, 0.1);\n --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color),\n 0 4px 18px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus\\:ring-0:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.active\\:bg-green-700:active {\n --tw-bg-opacity: 1;\n background-color: rgb(21 128 61 / var(--tw-bg-opacity));\n}\n.active\\:shadow-\\[0_8px_9px_-4px_rgba\\(51\\2c\n 45\\2c\n 45\\2c\n 0\\.2\\)\\2c\n 0_4px_18px_0_rgba\\(51\\2c\n 45\\2c\n 45\\2c\n 0\\.1\\)\\]:active {\n --tw-shadow: 0 8px 9px -4px rgba(51, 45, 45, 0.2),\n 0 4px 18px 0 rgba(51, 45, 45, 0.1);\n --tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color),\n 0 4px 18px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n@media (prefers-reduced-motion: reduce) {\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n .motion-reduce\\:animate-\\[spin_1\\.5s_linear_infinite\\] {\n animation: spin 1.5s linear infinite;\n }\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"f9dfe4","snapshot":null,"tags":null,"title":"button by Satwinder04","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":1200,"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: 16px 28px;\n font-size: 20px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n text-align: center;\n text-decoration: none;\n background-color: #1f347b;\n /* border-radius: 40px; */\n overflow: hidden;\n border: none;\n z-index: 1;\n}\n\n.animated-button:before {\n transition: 1s;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background-color: #fff;\n border-radius: 50%;\n opacity: 0;\n transform: translate(-50%, -50%);\n z-index: -1;\n}\n\n.animated-button:hover:before {\n width: 300px;\n height: 300px;\n opacity: 0.4;\n transition: all 0.5s ease-out;\n}\n\n.animated-button:hover {\n background-color: #fff;\n color: #202960;\n transition: all 0.5s ease-out;\n}\n\n.animated-button:hover:after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background-color: #255ea4;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n z-index: -2;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0% {\n width: 0;\n height: 0;\n opacity: 0.5;\n }\n\n 100% {\n width: 200px;\n height: 200px;\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"33b4fe","snapshot":null,"tags":null,"title":"button by JhaveLang","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":954,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n font-weight: 600;\n padding: 1em 4em 1em 4em;\n border-radius: 4em;\n border: 0;\n background: rgb(251, 213, 213);\n background: linear-gradient(\n 115deg,\n rgba(251, 213, 213, 1) 20%,\n rgba(248, 180, 180, 1) 41%,\n rgba(252, 233, 106, 1) 100%\n );\n cursor: pointer;\n box-shadow: 0em 0em 0em 0.3em rgb(251, 213, 213);\n transition: background 0.3s ease;\n}\n.button:hover {\n background: rgb(252, 233, 106);\n background: linear-gradient(\n 115deg,\n rgba(252, 233, 106, 1) 0%,\n rgba(251, 213, 213, 1) 37%,\n rgba(248, 180, 180, 1) 100%\n );\n}\n.button:hover {\n background: rgb(252, 233, 106);\n background: linear-gradient(\n 115deg,\n rgba(252, 233, 106, 1) 0%,\n rgba(251, 213, 213, 1) 37%,\n rgba(248, 180, 180, 1) 100%\n );\n}\n\n@keyframes bounce {\n 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-10px);\n }\n 60% {\n transform: translateY(-5px);\n }\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"655379","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":765,"cssLen":565,"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 background-color: #039be5;\n background-image: linear-gradient(to top right, #0163E0,#18ACFE);\n color: #ffffff;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n gap: 0.75rem;\n border: none;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n cursor: pointer;\n transition: .6s ease;\n}\n\n.button svg {\n height: 30px;\n}\n\n.button:hover {\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"af0690","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":284,"cssLen":663,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cssbuttons-io-button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: .2em;\n font-family: inherit;\n font-weight: 600;\n font-size: 16px;\n padding: .5em 1.5em;\n color: white;\n background: linear-gradient(0deg, rgb(0, 150, 60), rgb(100, 250, 150));\n border: none;\n outline: none;\n border-bottom: 3px solid rgb(0, 130, 40);\n box-shadow: 0 .5em .5em -.4em rgb(0, 0, 0, .5);\n letter-spacing: 0.08em;\n border-radius: 20em;\n cursor: pointer;\n transition: .5s;\n}\n\n.cssbuttons-io-button:hover {\n filter: brightness(1.2);\n color: rgb(0, 0, 0, .5);\n}\n\n.cssbuttons-io-button:active {\n transition: 0s;\n transform: rotate(-10deg);\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"ce5974","snapshot":null,"tags":null,"title":"button by Ubaton","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":232,"cssLen":1918,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Button\n\n","css":".rounded-md{border-radius:0.375rem}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\\[rgba\\(121\\2c 121\\2c 121\\2c 0\\.16\\)\\]{--tw-gradient-to:rgba(121, 121, 121, 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgba(121,121,121,0.16) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.duration-700{transition-duration:700ms}.hover\\:text-zinc-200:hover{--tw-text-opacity:1;color:rgb(228 228 231 / var(--tw-text-opacity))}.hover\\:shadow-zinc-400:hover{--tw-shadow-color:#a1a1aa;--tw-shadow:var(--tw-shadow-colored)}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"3a7b3b","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":704,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(89, 182, 35);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: rgb(53, 144, 0);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -5px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(43, 117, 0);\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"ab0de9","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":768,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(151, 151, 151);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: white;\n color: rgb(109, 109, 109);\n border: 2px solid rgb(109, 109, 109);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-8px, -9px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(216, 216, 216);\n}"}]}},"actionData":null,"errors":null}