{"loaderData":{"0":null,"0-3":{"total":7435,"projects":[{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"c3d8dd","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":580,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: inline-block;\n position: relative;\n padding: 13px 20px;\n border: none;\n background: rgba(51, 50, 50, 0.287);\n color: #ffffff;\n font-family: Arial, sans-serif;\n font-size: 16px;\n text-transform: uppercase;\n cursor: crosshair;\n overflow: hidden;\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, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);\n transition: left 0.3s ease;\n}\n\n.button:hover:before {\n left: 100%;\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"4f8ff3","snapshot":null,"tags":null,"title":"button by pradipkaityuiux","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":58,"cssLen":1144,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-color: #000fdb;\n border: none;\n padding: 20px 48px;\n color: #fff;\n cursor: pointer;\n border-radius: 40px;\n position: relative;\n z-index: 10;\n overflow: hidden;\n}\n\n.button span {\n font-size: 24px;\n font-weight: bold;\n}\n\n.button::before,\n.button::after {\n content: \"\";\n position: absolute;\n width: 100px;\n height: 100px;\n border-radius: 50px;\n z-index: -1;\n background-color: #535fff;\n transition: all 0.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.button::after {\n right: -30px;\n transform: translateX(30px) translateY(-110px) rotate(30deg);\n}\n\n.button::before {\n left: -20px;\n transform: translateX(-10px) translateY(50px) rotate(30deg);\n}\n\n.button:hover::before {\n transform: rotate(30deg) translateY(10px) translateX(-15px);\n}\n\n.button:hover::after {\n transform: rotate(30deg) translateY(-70px) translateX(-30px);\n}\n\n.button:hover {\n animation: wobel 0.3s ease-in-out;\n}\n\n@keyframes wobel {\n 0% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(1.1);\n }\n\n 60% {\n transform: scale(1.05);\n }\n\n 80% {\n transform: scale(0.85);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"1e2fab","snapshot":null,"tags":null,"title":"button by kheshore","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3362,"cssLen":1873,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".btn-conteiner {\n display: flex;\n justify-content: center;\n --color-text: #9ee5fa;\n --color-background: #353535;\n --color-outline: #9ee5fa80;\n --color-shadow: #00000080;\n}\n\n.btn-content {\n display: flex;\n align-items: center;\n padding: 0px 3px;\n text-decoration: none;\n font-family: \"Poppins\", sans-serif;\n font-size: 25px;\n color: var(--color-text);\n background: var(--color-background);\n transition: 1s;\n border-radius: 100px;\n box-shadow: 0 0 0.2em 0 var(--color-background);\n}\n\n.btn-content:hover,\n.btn-content:focus {\n transition: 0.5s;\n -webkit-animation: btn-content 1s;\n animation: btn-content 1s;\n outline: 0.1em solid transparent;\n outline-offset: 0.2em;\n box-shadow: 0 0 0.4em 0 var(--color-background);\n}\n\n.btn-content .icon-arrow {\n transition: 0.5s;\n margin-right: 0px;\n transform: scale(0.6);\n}\n\n.btn-content:hover .icon-arrow {\n transition: 0.5s;\n margin-right: 25px;\n}\n\n.icon-arrow {\n width: 20px;\n margin-left: 15px;\n position: relative;\n top: 6%;\n}\n\n/* SVG */\n#arrow-icon-one {\n transition: 0.4s;\n transform: translateX(-60%);\n}\n\n#arrow-icon-two {\n transition: 0.5s;\n transform: translateX(-30%);\n}\n\n.btn-content:hover #arrow-icon-three {\n animation: color_anim 1s infinite 0.2s;\n}\n\n.btn-content:hover #arrow-icon-one {\n transform: translateX(0%);\n animation: color_anim 1s infinite 0.6s;\n}\n\n.btn-content:hover #arrow-icon-two {\n transform: translateX(0%);\n animation: color_anim 1s infinite 0.4s;\n}\n\n/* SVG animations */\n@keyframes color_anim {\n 0% {\n fill: white;\n }\n\n 50% {\n fill: var(--color-background);\n }\n\n 100% {\n fill: #9ee5fa;\n }\n}\n\n/* Button animations */\n@-webkit-keyframes btn-content {\n 0% {\n outline: 0.2em solid var(--color-background);\n outline-offset: 0;\n }\n}\n\n@keyframes btn-content {\n 0% {\n outline: 0.2em solid var(--color-background);\n outline-offset: 0;\n }\n}\n"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"c6cf17","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":60,"cssLen":936,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n --button_radius: 0.75em;\n --button_color: #e8e8e8;\n --button_outline_color: #000000;\n --shadow-color: rgba(0, 0, 0, 0.2);\n --highlight-color: rgba(255, 255, 255, 0.2);\n font-size: 17px;\n font-weight: bold;\n border: none;\n border-radius: var(--button_radius);\n background: linear-gradient(\n to bottom right,\n var(--highlight-color),\n var(--shadow-color)\n );\n box-shadow: 6px 6px 16px var(--shadow-color),\n -6px -6px 16px var(--highlight-color);\n cursor: pointer;\n}\n\n.button_top {\n display: block;\n box-sizing: border-box;\n border: 2px solid var(--button_outline_color);\n border-radius: var(--button_radius);\n padding: 0.75em 1.5em;\n background: var(--button_color);\n color: var(--button_outline_color);\n transform: translateY(-0.2em);\n transition: transform 0.1s ease;\n}\n\nbutton:hover .button_top {\n transform: translateY(-0.33em);\n}\n\nbutton:active .button_top {\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:41.000Z","isPrivate":0,"projectId":"07da58","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":628,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --color: #8540f5;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all .5s;\n border: none;\n background-color: transparent;\n}\n\n.btn div {\n letter-spacing: 2px;\n font-weight: bold;\n background: var(--color);\n border-radius: 2rem;\n color: white;\n padding: 1rem;\n}\n\n.btn::before {\n content: '';\n z-index: -1;\n background-color: var(--color);\n border: 2px solid white;\n border-radius: 2rem;\n width: 110%;\n height: 100%;\n position: absolute;\n transform: rotate(10deg);\n transition: .5s;\n opacity: 0.2;\n}\n\n.btn:hover {\n cursor: pointer;\n filter: brightness(1.2);\n transform: scale(1.1);\n}\n\n.btn:hover::before {\n transform: rotate(0deg);\n opacity: 1;\n}\n\n.btn svg {\n transform: translateX(-200%);\n transition: .5s;\n width: 0;\n opacity: 0;\n}\n\n.btn:hover svg {\n width: 25px;\n transform: translateX(0%);\n opacity: 1;\n}\n\n.btn:active {\n filter: brightness(1.4);\n}"},{"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"}]}},"actionData":null,"errors":null}