{"loaderData":{"0":null,"0-3":{"total":7433,"projects":[{"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"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"089565","snapshot":null,"tags":null,"title":"button by Dashrath-Sharma","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1312,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n border-right: 1px solid #ff758f;\n border-bottom: 1px solid #ff758f;\n border-top: 1px solid transparent;\n border-left: 1px solid transparent;\n outline: none;\n background: #f8f9fa;\n font-size: 17px;\n padding: 1em 2em;\n border-radius: .5em;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n transition: all .5s;\n z-index: 1;\n}\n\n.btn:hover {\n color: #212529;\n border-right: 1px solid transparent;\n border-bottom: 1px solid transparent;\n border-top: 1px solid #ff758f;\n border-left: 1px solid #ff758f;\n box-shadow: 1px 1px 0 #f8f9fa,\n 2px 2px 0 #e9ecef,\n 3px 3px 0 #fff0f3,\n 4px 4px 0 #ffb3c1,\n 5px 5px 0 #ff4d6d,\n 6px 6px 0 #6c757d,\n 7px 7px 0 #a4133c,\n 8px 8px 0 #800f2f,\n 9px 9px 0 #212529;\n}\n\n.btn:active {\n transition: 0s;\n transform: scale(.93);\n}\n\n.btn::before,\n.btn::after {\n left: 0;\n content: '';\n position: absolute;\n background: #ffccd5;\n z-index: -1;\n}\n\n.btn::before {\n width: 0;\n height: 10%;\n transition: width .5s;\n}\n\n.btn:hover::before {\n width: 100%;\n}\n\n.btn::after {\n width: 100%;\n height: 0;\n border-radius: 100%;\n transition: all .5s .2s;\n}\n\n.btn:hover::after {\n height: 100%;\n border-radius: 0;\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"b8adf8","snapshot":null,"tags":null,"title":"button by themrsami","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":874,"cssLen":4233,"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-rose-500 {\n --tw-border-opacity: 1;\n border-color: rgb(244 63 94 / var(--tw-border-opacity));\n}\n.border-r-transparent {\n border-right-color: transparent;\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-rose-500 {\n --tw-text-opacity: 1;\n color: rgb(244 63 94 / var(--tw-text-opacity));\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\\:border-rose-600:hover {\n --tw-border-opacity: 1;\n border-color: rgb(225 29 72 / var(--tw-border-opacity));\n}\n.hover\\:bg-rose-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(251 113 133 / var(--tw-bg-opacity));\n}\n.hover\\:bg-opacity-10:hover {\n --tw-bg-opacity: 0.1;\n}\n.hover\\:text-rose-600:hover {\n --tw-text-opacity: 1;\n color: rgb(225 29 72 / var(--tw-text-opacity));\n}\n.focus\\:border-rose-700:focus {\n --tw-border-opacity: 1;\n border-color: rgb(190 18 60 / var(--tw-border-opacity));\n}\n.focus\\:text-rose-700:focus {\n --tw-text-opacity: 1;\n color: rgb(190 18 60 / var(--tw-text-opacity));\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\\:border-rose-800:active {\n --tw-border-opacity: 1;\n border-color: rgb(159 18 57 / var(--tw-border-opacity));\n}\n.active\\:text-rose-800:active {\n --tw-text-opacity: 1;\n color: rgb(159 18 57 / var(--tw-text-opacity));\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@media (prefers-color-scheme: dark) {\n .dark\\:border-rose-300 {\n --tw-border-opacity: 1;\n border-color: rgb(253 164 175 / var(--tw-border-opacity));\n }\n .dark\\:text-rose-300 {\n --tw-text-opacity: 1;\n color: rgb(253 164 175 / var(--tw-text-opacity));\n }\n .dark\\:hover\\:hover\\:bg-rose-300:hover:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(253 164 175 / var(--tw-bg-opacity));\n }\n}\n"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"3e42f0","snapshot":null,"tags":null,"title":"button by ozgeozkaraa01","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":695,"cssLen":442,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: none;\n border-radius: 1rem;\n transition: all 0.5s linear;\n padding: 1.2em;\n background-color: #ACB1D6;\n}\n\n.tooltip {\n position: relative;\n display: inline-block;\n}\n\n.tooltip .tooltiptext {\n visibility: hidden;\n background-color: #AAAAAA;\n color: white;\n border-radius: 10px;\n padding: 5px;\n position: absolute;\n z-index: 1;\n left: 62px;\n width: 60px;\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n}"},{"created":"2024-01-22T17:00:09.000Z","isPrivate":0,"projectId":"6b17e2","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":140,"cssLen":1045,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".button {\n width: 160px;\n height: 55px;\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n background: none;\n outline: none;\n border: none;\n}\n\n.button-inner {\n width: inherit;\n height: inherit;\n background: rgba(255,255,255,.05);\n box-shadow: 0 0 10px rgba(0,0,0,0.25);\n backdrop-filter: blur(10px);\n border-radius: 8px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n font-weight: 900;\n letter-spacing: .1em;\n color: blue;\n}\n\n.button:hover {\n transform: scale(1.04) rotate(1deg);\n}\n\n.circle {\n width: 20px;\n height: 20px;\n background: radial-gradient(blue,darkblue);\n border-radius: 50%;\n position: absolute;\n animation: move-up6 2s ease-in infinite alternate-reverse;\n}\n\n.circle:nth-child(1) {\n top: 0px;\n left: 0px;\n}\n\n.circle:nth-child(2) {\n bottom: 0px;\n right: 0px;\n animation-name: move-down1;\n}\n\n@keyframes move-up6 {\n to {\n transform: translateY(-5px);\n }\n}\n\n@keyframes move-down1 {\n to {\n transform: translateY(5px);\n }\n}\n\n"}]}},"actionData":null,"errors":null}