{"loaderData":{"0":null,"0-2":{"total":7086,"projects":[{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"8072a1","snapshot":null,"tags":null,"title":"button by elijahgummer","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n ❤️\n Favourite\n

\n","css":"ul {\n position: relative;\n display: flex;\n gap: 25px;\n}\n\nul li {\n position: relative;\n list-style: none;\n width: 60px;\n height: 60px;\n background: #fff;\n border-radius: 60px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n transition: 0.5s;\n}\n\nul li:hover {\n width: 180px;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0);\n}\n\nul li::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 60px;\n background: linear-gradient(45deg, var(--i), var(--j));\n opacity: 0;\n transition: 0.5s;\n}\n\nul li:hover::before {\n opacity: 1;\n}\n\nul li::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 transition: 0.5s;\n filter: blur(15px);\n z-index: -1;\n opacity: 0;\n}\n\nul li:hover::after {\n opacity: 0.5;\n}\n\nul li .icon {\n color: #777;\n font-size: 1.75em;\n transition: 0.5s;\n transition-delay: 0.25s;\n}\n\nul li:hover .icon {\n transform: scale(0);\n color: #fff;\n transition-delay: 0s;\n}\n\nul li span {\n position: absolute;\n}\n\nul li .title {\n color: #fff;\n font-size: 1.1em;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n transform: scale(0);\n transition: 0.5s;\n transition-delay: 0s;\n}\n\nul li:hover .title {\n transform: scale(1);\n transition-delay: 0.25s;\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"b606d7","snapshot":null,"tags":null,"title":"button by WhiteNervosa","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":56,"cssLen":1188,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #2d7f2f;\n font-family: \"Verdana\", sans-serif;\n padding: 5px 10px;\n font-size: 18px;\n color: #ececec;\n cursor: pointer;\n width: fit-content;\n user-select: none;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n border-radius: 5px;\n touch-action: none;\n position: relative;\n border: none;\n transition-property: box-shadow;\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0), inset 0px 0px 0px 0px rgba(230, 230, 230, 0);\n}\n\nbutton:focus,\nbutton:hover {\n box-shadow: inset 0px -4px 0px 0px rgb(0 0 0 / 35%), inset 0px 2px 0px 0px rgb(230 230 230 / 7%);\n}\n\nbutton:active {\n box-shadow: inset 0px 2px 0px 1px rgb(0 0 0 / 29%), inset 0px -1px 0px 0px rgb(230 230 230 / 7%);\n}\n\nbutton .inner {\n user-select: none;\n pointer-events: none;\n transform: translateY(0px) scale(1) translate3d(0, 0, 0);\n transition-property: transform;\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\nbutton:active .inner {\n transform: translateY(1px) scale(0.98) translate3d(0, 0, 0);\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"b46751","snapshot":null,"tags":null,"title":"button by MuhammadHasann","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2684,"cssLen":1154,"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 padding: 13px 35px;\n background: transparent;\n font-size: 17px;\n font-weight: 900;\n border: none;\n transition: all .3s ease-in-out;\n}\n\nbutton::after {\n content: \"Read More\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 155px;\n height: 47px;\n background-color: #ffffff;\n font-size: 17px;\n font-weight: 900;\n line-height: 47px;\n color: #181818;\n border: 2px solid #181818;\n border-radius: 50px;\n transition: all .3s ease-in-out;\n z-index: 2;\n}\n\nbutton:hover::after {\n width: 165px;\n height: 50px;\n font-size: 18px;\n line-height: 50px;\n}\n\nbutton:focus::after {\n content: \"Read less\";\n top: 200%;\n width: 155px;\n height: 47px;\n font-size: 17px;\n line-height: 47px;\n z-index: -2;\n pointer-events: none;\n}\n\n.icon {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n width: 20px;\n height: auto;\n z-index: -3;\n transition: all .3s ease-in-out;\n}\n\nbutton:focus .icon {\n top: -250%;\n width: 75px;\n height: auto;\n}\n\n.fil0 {\n fill: #333333\n}\n\n.fil2 {\n fill: #222222\n}\n\n.fil1 {\n fill: #181818\n}\n\n.fil3 {\n fill: #181818\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"a55273","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":492,"cssLen":939,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n}\n\n.BG {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background: #f48024;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n}\n\n.Btn:hover .BG {\n transform: rotate(35deg);\n transform-origin: bottom;\n}\n\n.Btn:hover .svgContainer {\n background-color: rgba(202, 202, 202, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"bf0b03","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":547,"cssLen":832,"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 width: 130px;\n height: 35px;\n border-radius: 30px;\n background-color: white;\n border: 1px #cd201f solid;\n overflow: hidden;\n}\n\n.text1 {\n font-size: 15px;\n font-weight: 600;\n margin-left: 22%;\n}\n\n.text2 {\n position: absolute;\n top: 25%;\n left: -50px;\n font-weight: 700;\n font-size: 14px;\n color: white;\n}\n\n.icon {\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.5s;\n}\n\n.icon::before {\n position: absolute;\n left: -100px;\n top: 0;\n z-index: -1;\n content: '';\n width: 130px;\n height: 33px;\n border-radius: 30px;\n background-color: #cd201f;\n}\n\nbutton:hover .icon {\n transform: translateX(96px);\n transition: transform 0.5s;\n}\n\nbutton:hover .text2 {\n transform: translateX(100px);\n transition: transform 0.6s;\n}\n\nbutton:active {\n transform: scale(1.03);\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"6923a3","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":342,"cssLen":999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-class-name {\n --color: 180,255, 100;\n border-radius: .5em;\n transition: .3s;\n background-color: rgba(var(--color), .2);\n color: rgb(var(--color));\n fill: rgb(var(--color));\n font-family: monospace;\n font-weight: bolder;\n font-size: x-large;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n cursor: pointer;\n border: 2px solid rgb(var(--color));\n box-shadow: 0 0 10px rgba(var(--color), .4);\n outline: none;\n display: flex;\n align-items: center;\n padding: .5em 1em;\n}\n\n.btn-class-name:hover {\n box-shadow: 0 0 0 5px rgba(var(--color), .5);\n}\n\n.btn-class-name span {\n transform: scale(.8);\n transition: .3s;\n}\n\n.btn-class-name:hover span {\n transform: scale(1);\n}\n\n.btn-class-name svg {\n font-size: 0;\n transform: scale(0.5) translateX(0%) rotate(-180deg);\n transition: .3s;\n}\n\n.btn-class-name:hover svg {\n font-size: 20px;\n transform: scale(1) translateX(20%) rotate(0deg);\n}\n\n.btn-class-name:active {\n transition: 0s;\n box-shadow: 0 0 0 5px rgb(var(--color));\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"44da77","snapshot":null,"tags":null,"title":"button by z1789976172","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":147,"cssLen":1830,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Explore More\n Explore More\n

","css":":after,:before {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n.btn--huge {\n cursor: pointer;\n position: relative;\n height: 45px;\n background-color: #ff4e33;\n text-transform: uppercase;\n display: inline-block;\n color: fff;\n font-family: Arial;\n font-weight: 800;\n font-size: 12px;\n letter-spacing: 1px;\n padding: 0 20px 0 50px;\n white-space: nowrap;\n}\n\n.btn--huge:before {\n -webkit-transition: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n transition: all 0.5s cubic-bezier(0.785, 0.15 , 0.15, 0.86);\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 30px;\n height: 100%;\n background-color: #D6D4D3;\n}\n\n.btn--huge:after {\n -webkit-transition: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n transition: all 0.5s cubic-bezier(0.785, 0.15 , 0.15, 0.86);\n content: '→';\n font-size: 14px;\n line-height: 1;\n color: #D6D4D3;\n position: absolute;\n left: 20px;\n top: 50%;\n width: 22px;\n height: 22px;\n margin-top: -11px;\n background: #FF4E33;\n z-index: 2;\n border-radius: 50%;\n border: 1px solid #D6D4D3;\n}\n\n.btn--huge__text {\n position: relative;\n top: -1px;\n -webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.btn--huge__text div {\n position: relative;\n color: #fff;\n}\n\n.btn--huge__text span {\n -webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n top: 0;\n left: 0;\n color: #000;\n width: 0;\n}\n\n.btn--huge:hover:after {\n -webkit-transform: translateX(-30px);\n transform: translateX(-30px);\n}\n\n.btn--huge:hover:before {\n width: 0;\n}\n\n.btn--huge:hover .btn--huge__text span {\n width: 100%;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"21376f","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":1190,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n position: relative;\n width: 180px;\n height: 60px;\n border-radius: 30px;\n border: none;\n background-color: rgb(255, 136, 0);\n color: white;\n box-shadow: 0px 10px 10px rgb(255, 198, 146) inset,\n 0px 5px 10px rgba(5, 5, 5, 0.212),\n 0px -10px 10px rgb(255, 102, 0) inset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.Btn::before {\n width: 80%;\n height: 2px;\n position: absolute;\n background-color: rgba(250, 250, 250, 0.678);\n content: \"\";\n filter: blur(1px);\n top: 7px;\n border-radius: 50%;\n}\n\n.Btn::after {\n width: 80%;\n height: 2px;\n position: absolute;\n background-color: rgba(250, 250, 250, 0.137);\n content: \"\";\n filter: blur(1px);\n bottom: 7px;\n border-radius: 50%;\n}\n\n.Btn:hover {\n animation: jello-horizontal 0.9s both;\n}\n\n@keyframes jello-horizontal {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n transform: scale3d(1.05, 0.95, 1);\n }\n\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"fd0ec1","snapshot":null,"tags":null,"title":"button by mRcOol7","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":630,"cssLen":6081,"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","css":"/* ! tailwindcss v3.4.1 | MIT License | s://tailwindcss.com */\n*,\n::after,\n::before {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: #e5e7eb;\n}\n::after,\n::before {\n --tw-content: \"\";\n}\n:host,\nhtml {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n tab-size: 4;\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-feature-settings: normal;\n font-variation-settings: normal;\n -webkit-tap-highlight-color: transparent;\n}\nbody {\n margin: 0;\n line-height: inherit;\n}\nhr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n}\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\na {\n color: inherit;\n text-decoration: inherit;\n}\nb,\nstrong {\n font-weight: bolder;\n}\ncode,\nkbd,\npre,\nsamp {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n \"Liberation Mono\", \"Courier New\", monospace;\n font-feature-settings: normal;\n font-variation-settings: normal;\n font-size: 1em;\n}\nsmall {\n font-size: 80%;\n}\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\ntable {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-size: 100%;\n font-weight: inherit;\n line-height: inherit;\n color: inherit;\n margin: 0;\n padding: 0;\n}\nbutton,\nselect {\n text-transform: none;\n}\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n -webkit-appearance: button;\n background-color: transparent;\n background-image: none;\n}\n:-moz-focusring {\n outline: auto;\n}\n:-moz-ui-invalid {\n box-shadow: none;\n}\nprogress {\n vertical-align: baseline;\n}\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n[type=\"search\"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n}\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\nsummary {\n display: list-item;\n}\nblockquote,\ndd,\ndl,\nfigure,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nmenu,\nol,\nul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\ndialog {\n padding: 0;\n}\ntextarea {\n resize: vertical;\n}\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n[role=\"button\"],\nbutton {\n cursor: pointer;\n}\n:disabled {\n cursor: default;\n}\naudio,\ncanvas,\nembed,\niframe,\nimg,\nobject,\nsvg,\nvideo {\n display: block;\n vertical-align: middle;\n}\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n[hidden] {\n display: none;\n}\n*,\n::before,\n::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-teal-500 {\n stroke: #14b8a6;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\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.group:hover .group-hover\\:fill-teal-800 {\n fill: #115e59;\n}\n.group:active .group-active\\:fill-teal-600 {\n fill: #0d9488;\n}\n.group:active .group-active\\:stroke-teal-200 {\n stroke: #99f6e4;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"7fa697","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":56,"cssLen":1434,"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 text-decoration: none;\n color: #e8e8e8;\n padding: 15px 30px;\n width: 170px;\n height: 60px;\n font-weight: 600;\n font-size: 18px;\n cursor: pointer;\n border: none;\n overflow: hidden;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.button span , .button span::before {\n position: absolute;\n top: 0%;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n pointer-events: none;\n justify-content: center;\n transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.button span::before {\n content: 'Hello!';\n top: -100%;\n}\n\n.button:before {\n top: 0;\n left: 0;\n border-top: 2px solid #e8e8e8;\n border-left: 2px solid #e8e8e8;\n}\n\n.button:after {\n bottom: 0;\n right: 0;\n border-bottom: 2px solid #e8e8e8;\n border-right: 2px solid #e8e8e8;\n}\n\n.button:after,\n.button:before {\n content: \"\";\n position: absolute;\n width: 24px;\n height: 24px;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.button:hover {\n box-shadow: 0 0 30px rgba(248 ,155, 41,0.4),\n 0 0 30px rgba(255, 15, 123,0.4);\n ;\n}\n\n.button:hover:before,\n.button:hover:after {\n width: 100%;\n height: 100%;\n}\n\n.button:hover span {\n top: 100%;\n}\n\n.button:active {\n scale: 0.95;\n box-shadow: 0 0 10px rgba(248 ,155, 41,0.4),\n 0 0 10px rgba(255, 15, 123,0.4);\n ;\n}\n\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"57427d","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":916,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --color: rgba(88, 101, 242, 1);\n padding: 0.8em 1.7em;\n background-color: transparent;\n border-radius: .3em;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n transition: .5s;\n font-weight: 400;\n font-size: 17px;\n border: 1px solid;\n font-family: inherit;\n text-transform: uppercase;\n color: var(--color);\n z-index: 1;\n}\n\n.button::before, .button::after {\n content: '';\n display: block;\n width: 50px;\n height: 50px;\n transform: translate(-50%, -50%);\n position: absolute;\n border-radius: 50%;\n z-index: -1;\n background-color: var(--color);\n transition: 1s ease;\n}\n\n.button::before {\n top: -1em;\n left: -1em;\n}\n\n.button::after {\n left: calc(100% + 1em);\n top: calc(100% + 1em);\n}\n\n.button:hover::before, .button:hover::after {\n height: 410px;\n width: 410px;\n}\n\n.button:hover {\n color: rgb(10, 25, 30);\n color: #fff;\n}\n\n.button:active {\n filter: brightness(.8);\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"3a2f4b","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2241,"cssLen":1542,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n UP\n \n
\n Down\n \n
\n Left\n \n
\n Right\n \n

","css":".wrapper {\n display: inline-flex;\n list-style: none;\n height: 120px;\n width: 100%;\n padding-top: 40px;\n font-family: \"Poppins\", sans-serif;\n justify-content: center;\n}\n\n.wrapper .icon {\n position: relative;\n background: #fff;\n border-radius: 50%;\n margin: 10px;\n width: 50px;\n height: 50px;\n font-size: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .tooltip {\n position: absolute;\n top: 0;\n font-size: 14px;\n background: #fff;\n color: #fff;\n padding: 5px 8px;\n border-radius: 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .tooltip::before {\n position: absolute;\n content: \"\";\n height: 8px;\n width: 8px;\n background: #fff;\n bottom: -3px;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .icon:hover .tooltip {\n top: -45px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\n.wrapper .icon:hover span,\n.wrapper .icon:hover .tooltip {\n text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);\n}\n\n.wrapper svg {\n fill: green;\n}\n\n.wrapper span:hover,\n.wrapper svg:hover,\n.wrapper .black:hover,\n.wrapper .black:hover .tooltip,\n.wrapper .black:hover .tooltip::before {\n background: #222;\n color: white;\n fill: white;\n}\n\n"}]}},"actionData":null,"errors":null}