{"loaderData":{"0":null,"0-3":{"total":7297,"projects":[{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"aca727","snapshot":null,"tags":null,"title":"button by Hybaa","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1231,"cssLen":1759,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n \n \n \n

","css":".mr-4 {\n margin-right: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-5 {\n height: 1.25rem\n}\n\n.w-5 {\n width: 1.25rem\n}\n\n.w-fit {\n width: -moz-fit-content;\n width: fit-content\n}\n\n.w-full {\n width: 100%\n}\n\n.items-center {\n align-items: center\n}\n\n.rounded-2xl {\n border-radius: 1rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-transparent {\n border-color: transparent\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-2\\.5 {\n padding: 0.625rem\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem\n}\n\n.px-1\\.5 {\n padding-left: 0.375rem;\n padding-right: 0.375rem\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n\n.py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem\n}\n\n.text-center {\n text-align: center\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.last-of-type\\:mr-0:last-of-type {\n margin-right: 0px\n}\n\n.hover\\:border-2:hover {\n border-width: 2px\n}\n\n.hover\\:text-black:hover {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.focus\\:opacity-100:focus {\n opacity: 1\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.active\\:border-2:active {\n border-width: 2px\n}\n\n@media (prefers-color-scheme: dark) {\n .dark\\:border-0 {\n border-width: 0px\n }\n\n .dark\\:text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity))\n }\n}\n\n@media (min-width: 768px) {\n .md\\:px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem\n }\n\n .md\\:py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n }\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"59d540","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":946,"cssLen":1055,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 45px;\n height: 45px;\n /* border: none; */\n border-radius: 50%;\n background-color: #00acee;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n position: relative;\n transition-duration: .5s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);\n border: 2px solid #bbecff;\n}\n\n.logoIcon {\n fill: white;\n}\n\n.tooltip {\n position: absolute;\n top: -20px;\n opacity: 0;\n background-color: #00acee;\n color: white;\n padding: 5px 10px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: .2s;\n pointer-events: none;\n letter-spacing: 0.5px;\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 10px;\n background-color: #00acee;\n background-size: 1000%;\n background-position: center;\n transform: rotate(45deg);\n bottom: -20%;\n transition-duration: .3s;\n}\n\n.Btn:hover .tooltip {\n top: -45px;\n opacity: 1;\n transition-duration: .3s;\n}\n\n.Btn:hover {\n background-position: right;\n transition-duration: .5s;\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"312804","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61237,"cssLen":2514,"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 \n \n \n \n

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

\n","css":".content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 15px;\n width: 300px;\n height: 100px;\n position: relative;\n overflow: hidden;\n border-radius: 14px;\n}\n.content::before {\n content: \"\";\n position: absolute;\n left: 0%;\n top: 50%;\n transform: translateY(-50%);\n bottom: 0;\n width: 40px;\n height: 96px;\n background-image: linear-gradient(90deg, #ffffff1c, transparent);\n z-index: 2;\n border-radius: 10px 0 0 10px;\n}\n.content::after {\n content: \"\";\n position: absolute;\n right: 0%;\n top: 50%;\n transform: translateY(-50%);\n bottom: 0;\n width: 40px;\n height: 96px;\n background-image: linear-gradient(-90deg, #ffffff1c, transparent);\n z-index: 9;\n border-radius: 0 10px 10px 0;\n}\n.basic-marquee {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 100%;\n}\n.basic-marquee .button {\n transition: all 0.3s ease;\n}\n.basic-marquee .button:hover {\n transform: scale(1.1);\n cursor: pointer;\n}\n.basic-marquee-1 {\n animation: marquee 15s linear infinite;\n}\n.basic-marquee-2 {\n animation: marquee 21s linear infinite;\n}\n.benefits {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 15px;\n min-width: 900px;\n height: 100%;\n white-space: nowrap;\n overflow: hidden;\n position: absolute;\n inset: 0;\n}\n@keyframes marquee {\n 0% {\n transform: translateX(-10%);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n.basic-marquee svg {\n width: 40px;\n}\n.basic-marquee button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.cls-1 {\n fill: #1ab7ea;\n}\n\n.cls-1,\n.cls-2 {\n fill-rule: evenodd;\n}\n\n.cls-2 {\n fill: #fff;\n}\n\n.cls-3 {\n fill: #ee8208;\n fill-rule: evenodd;\n}\n\n.cls-4 {\n fill: #fff;\n}\n\n.cls-5,\n.cls-6 {\n fill-rule: evenodd;\n}\n\n.cls-5 {\n fill: #48dd55;\n}\n.cls-6 {\n fill: #fff;\n}\n\n.cls-7 {\n fill: #0a66c2;\n}\n\n.cls-7,\n.cls-8 {\n fill-rule: evenodd;\n}\n\n.cls-8 {\n fill: #fff;\n}\n\n.cls-9 {\n fill: #10b7f4;\n}\n\n.cls-9,\n.cls-10 {\n fill-rule: evenodd;\n}\n\n.cls-10 {\n fill: #fff;\n}\n\n.cls-11 {\n fill: #1da1f2;\n}\n\n.cls-11,\n.cls-12 {\n fill-rule: evenodd;\n}\n\n.cls-12 {\n fill: #fff;\n}\n\n.cls-13 {\n fill: #ea4c89;\n}\n\n.cls-13,\n.cls-14 {\n fill-rule: evenodd;\n}\n\n.cls-14 {\n fill: #fff;\n}\n\n.cls-15 {\n fill: #1769ff;\n}\n\n.cls-15,\n.cls-16 {\n fill-rule: evenodd;\n}\n\n.cls-16 {\n fill: #fff;\n}\n\n.cls-17 {\n fill: #f26522;\n}\n\n.cls-17,\n.cls-18 {\n fill-rule: evenodd;\n}\n\n.cls-18 {\n fill: #fff;\n}\n"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"7a00b0","snapshot":null,"tags":null,"title":"button by SevenAJJY","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":867,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --main-color: #ffce06;\n --main-alt-color: #fff696;\n height: 44px;\n font-size: 16px!important;\n line-height: 44px;\n font-weight: 700;\n color: #3f5cc3;\n text-shadow: 0 1px 1px #fff8c4;\n text-transform: uppercase;\n text-align: center;\n -webkit-box-shadow: rgb(99 121 133 / 14%) 0 0 0 4px;\n box-shadow: rgb(99 121 133 / 14%) 0 0 0 4px;\n border-radius: 4px;\n border: none;\n border-top: 1px solid var(--main-alt-color);\n border-bottom: 1px solid var(--main-color);\n background-color: var(--main-color);\n outline: 0;\n cursor: pointer;\n margin: 0 0 5px 4px;\n padding: 0 20px;\n transition: transform .3s ease;\n}\n\n.btn:hover {\n border-top-color: var(--main-alt-color);\n border-bottom-color: var(--main-color);\n background: -webkit-gradient(linear, left top, left bottom, from(#fae811), to(#f5d604));\n}\n\n.btn:active {\n transform: scale(0.7);\n}\n"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"3cebd9","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1158,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #dedede;\n --bg-color-sub: #222;\n --bg-color: #323232;\n --main-color: #dedede;\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(33px);\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:32.000Z","isPrivate":0,"projectId":"478cd2","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":460,"cssLen":1966,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-\\[150\\%\\] {\n top: -150%\n}\n\n.left-0 {\n left: 0px\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-\\[5px\\] {\n height: 5px\n}\n\n.w-80 {\n width: 20rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-b-4 {\n border-bottom-width: 4px\n}\n\n.border-lime-400 {\n --tw-border-opacity: 1;\n border-color: rgb(163 230 53 / var(--tw-border-opacity))\n}\n\n.bg-lime-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(163 230 53 / var(--tw-bg-opacity))\n}\n\n.bg-lime-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(26 46 5 / var(--tw-bg-opacity))\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.text-lime-400 {\n --tw-text-opacity: 1;\n color: rgb(163 230 53 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\n\n.shadow-\\[0_0_10px_10px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.3\\)\\] {\n --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.3);\n --tw-shadow-colored: 0 0 10px 10px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-lime-400 {\n --tw-shadow-color: #a3e635;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:border-b:hover {\n border-bottom-width: 1px\n}\n\n.hover\\:border-t-4:hover {\n border-top-width: 4px\n}\n\n.hover\\:brightness-150:hover {\n --tw-brightness: brightness(1.5);\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}\n\n.active\\:opacity-75:active {\n opacity: 0.75\n}\n\n.group:hover .group-hover\\:top-\\[150\\%\\] {\n top: 150%\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"500dab","snapshot":null,"tags":null,"title":"button by nazarbayev01","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":679,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 1em 2em;\n border: none;\n border-radius: 5px;\n font-weight: bold;\n letter-spacing: 3px;\n background: #DCFFFC;\n text-transform: uppercase;\n color: #088178;\n transition: all 1000ms;\n font-size: 15px;\n position: relative;\n overflow: hidden;\n outline: 2px solid #088178;\n}\n\nbutton:hover {\n color: #DCFFFC;\n transform: scale(1);\n outline: 2px solid #088178;\n box-shadow: 4px 5px 17px -4px #088178;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n left: -50px;\n top: 0;\n width: 0;\n height: 100%;\n background-color: #088178;\n transform: skewX(30deg);\n z-index: -1;\n transition: width 1000ms;\n}\n\nbutton:hover::before {\n width: 250%;\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"6fdb44","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 100px;\n height: 40px;\n font-size: 15px;\n font-weight: 600;\n color: white;\n border: none;\n background-size: 200% 200%;\n background-color: #99fff7;\n background-image: radial-gradient(\n at 65% 89%,\n hsla(249, 100%, 62%, 1) 0px,\n transparent 50%\n ),\n radial-gradient(at 68% 76%, hsla(334, 100%, 74%, 1) 0px, transparent 50%),\n radial-gradient(at 52% 39%, hsla(34, 100%, 71%, 1) 0px, transparent 50%),\n radial-gradient(at 12% 37%, hsla(282, 100%, 66%, 1) 0px, transparent 50%),\n radial-gradient(at 34% 9%, hsla(201, 100%, 63%, 1) 0px, transparent 50%),\n radial-gradient(at 89% 18%, hsla(193, 100%, 74%, 1) 0px, transparent 50%),\n radial-gradient(at 36% 37%, hsla(251, 100%, 65%, 1) 0px, transparent 50%);\n background-position: left;\n cursor: pointer;\n border-radius: 10px;\n transition: all 3s;\n}\n\n.button:hover {\n background-position: right;\n}\n"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"bdeb46","snapshot":null,"tags":null,"title":"button by eslam-hany","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":840,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: inline-block;\n text-align: center;\n font-weight: bold;\n padding: 0.7em 2em;\n border: 3px solid mediumturquoise;\n border-radius: 2px;\n position: relative;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);\n color: mediumturquoise;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n cursor: pointer;\n}\n\nbutton:before {\n transition: 0.5s all ease;\n position: absolute;\n top: 0;\n left: 50%;\n right: 50%;\n bottom: 0;\n opacity: 0;\n content: '';\n background-color: lightblue;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: white;\n}\n\nbutton:hover:before, button:focus:before {\n transition: 0.5s all ease;\n left: 0;\n right: 0;\n opacity: 1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"54d8f6","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":460,"cssLen":1966,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-\\[150\\%\\] {\n top: -150%\n}\n\n.left-0 {\n left: 0px\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-\\[5px\\] {\n height: 5px\n}\n\n.w-80 {\n width: 20rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-b-4 {\n border-bottom-width: 4px\n}\n\n.border-cyan-400 {\n --tw-border-opacity: 1;\n border-color: rgb(34 211 238 / var(--tw-border-opacity))\n}\n\n.bg-cyan-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 211 238 / var(--tw-bg-opacity))\n}\n\n.bg-cyan-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(8 51 68 / var(--tw-bg-opacity))\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.text-cyan-400 {\n --tw-text-opacity: 1;\n color: rgb(34 211 238 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\n\n.shadow-\\[0_0_10px_10px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.3\\)\\] {\n --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.3);\n --tw-shadow-colored: 0 0 10px 10px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-cyan-400 {\n --tw-shadow-color: #22d3ee;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:border-b:hover {\n border-bottom-width: 1px\n}\n\n.hover\\:border-t-4:hover {\n border-top-width: 4px\n}\n\n.hover\\:brightness-150:hover {\n --tw-brightness: brightness(1.5);\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}\n\n.active\\:opacity-75:active {\n opacity: 0.75\n}\n\n.group:hover .group-hover\\:top-\\[150\\%\\] {\n top: 150%\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"9604e7","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":612,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 1rem 2rem;\n border: 0;\n box-shadow: 0px 0px 40px 0px red;\n font-weight: bolder;\n color: white;\n border-radius: 0.3rem;\n background-color: red;\n letter-spacing: .2rem;\n}\n\nbutton:hover {\n animation: changeBg 1s infinite;\n -webkit-animation-duration: 10s;\n}\n\n@keyframes changeBg {\n 0%,\n\t100% {\n box-shadow: 0px 0px 40px 0px red;\n }\n\n 25% {\n box-shadow: 0px 0px 40px 0px turquoise;\n background-color: turquoise;\n }\n\n 50% {\n box-shadow: 0px 0px 40px 0px purple;\n background-color: purple;\n }\n\n 75% {\n box-shadow: 0px 0px 40px 0px rgb(191, 204, 11);\n background-color: rgb(191, 204, 11);\n }\n}"},{"created":"2024-01-22T17:00:32.000Z","isPrivate":0,"projectId":"99299b","snapshot":null,"tags":null,"title":"button by Lokesh1379","updated":"2024-01-22T17:00:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3968,"cssLen":890,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".parent {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.child {\n width: 50px;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n transform-style: preserve-3d;\n transition: all 0.5s ease-in-out;\n border-radius: 50%;\n margin: 0 5px;\n}\n\n.child:hover {\n background-color: white;\n background-position: -100px 100px, -100px 100px;\n transform: rotate3d(0.5, 1, 0, 30deg);\n transform: perspective(180px) rotateX(60deg) translateY(2px);\n box-shadow: 0px 10px 10px rgb(1, 49, 182);\n}\n\nbutton {\n border: none;\n background-color: transparent;\n font-size: 20px;\n}\n\n.button:hover {\n width: inherit;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n transform: translate3d(0px, 0px, 15px) perspective(180px) rotateX(-35deg) translateY(2px);\n border-radius: 50%;\n}"}]}},"actionData":null,"errors":null}