{"loaderData":{"0":null,"0-3":{"total":7433,"projects":[{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"95386b","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":896,"cssLen":2824,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":"button {\n width: 180px;\n height: 55px;\n border-radius: 50px;\n border: solid 4px rgba(255, 255, 255, 0);\n background-clip: padding-box;\n box-shadow: 0 4px 20px -2px rgba(39, 94, 254, 0.5);\n background-color: hsl(241deg 44% 49%);\n font-size: 20px;\n letter-spacing: 1px;\n font-weight: 100;\n position: relative;\n cursor: pointer;\n color: white;\n}\n\n.loading {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n z-index: 0;\n}\n\n.loading i {\n width: 5px;\n height: 5px;\n background-color: white;\n display: inline-flex;\n border-radius: 100%;\n animation-name: loading5234;\n animation-iteration-count: infinite;\n animation-duration: 1s;\n}\n\n@keyframes loading5234 {\n 100% {\n opacity: 0;\n }\n}\n\ninput:checked + button {\n transition-delay: 4s;\n background-color: #31cb20;\n box-shadow: 0 4px 20px -2px rgb(49 203 32);\n}\n\n.title, .approved {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n width: 100%;\n display: block;\n font-size: 15px;\n}\n\nbutton .title {\n background-color: hsl(241deg 44% 49%);\n width: 90%;\n}\n\ninput:checked + button .approved {\n transition-delay: 4s;\n visibility: visible;\n opacity: 1;\n background-color: #31cb20;\n width: 90%;\n}\n\ninput:checked + button .title {\n visibility: hidden;\n opacity: 0;\n transition: all .5s ease;\n}\n\ninput:not(:checked) + button .approved {\n visibility: hidden;\n opacity: 1;\n}\n\ninput {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n z-index: 999;\n outline: none;\n width: 210px;\n height: 60px;\n border-radius: 50px;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.plane {\n width: 55px;\n height: 55px;\n border-radius: 100%;\n position: absolute;\n left: 0;\n z-index: 9;\n top: 0;\n transition: none;\n background-color: transparent;\n opacity: 0;\n}\n\n.plane svg {\n width: 45px;\n height: 45px;\n position: absolute;\n left: 0px;\n top: 0px;\n transform: rotate(90deg) translate(-50%,-40%) scale(1);\n transition: all 0s ease;\n fill: #3c4a57;\n}\n\ninput:checked + button .plane {\n animation: airplane-route 4s forwards;\n animation-timing-function: cubic-bezier(0, 0, 0, 0);\n}\n\n@keyframes airplane-route {\n 0% {\n left: -300px;\n opacity: 1;\n transform: scale(2);\n }\n\n 20% {\n left: 0px;\n transform: scale(1);\n opacity: 1;\n }\n\n 40% {\n left: 100%;\n opacity: 1;\n transform: translateX(-100%);\n }\n\n 60% {\n left: 100%;\n opacity: 1;\n transform: translateX(-100%) translateY(-6%) rotate(180deg);\n }\n\n 80% {\n left: 0%;\n opacity: 1;\n top: -6px;\n transform: translateX(0%) rotate(180deg);\n }\n\n 100% {\n left: 0%;\n opacity: 1;\n transform: translateX(0%) rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"3b5d4e","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":162,"cssLen":596,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".game-button {\n background-color: #ff7979;\n color: #fff;\n border: none;\n border-radius: 20px;\n padding: 10px 20px;\n font-size: 18px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: bold;\n box-shadow: 2px 2px 10px #ff7979;\n transition: all 0.2s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.play-icon {\n width: 24px;\n height: 24px;\n fill: #fff;\n margin-right: 10px;\n}\n\n.game-button:hover {\n background-color: #2f3640;\n color: #ff7979;\n box-shadow: 2px 2px 20px #2f3640;\n transform: translateY(-2px);\n}\n"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"d05999","snapshot":null,"tags":null,"title":"button by gauravsharmadriveit","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":694,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n font-weight: 600;\n display: inline-block;\n position: relative;\n border: 3px solid #fff;\n padding: 15px 60px;\n font-size: 16px;\n}\n\n.button::after, .button::before {\n position: absolute;\n content: \"\";\n width: 0;\n height: 0;\n transition: .5s;\n}\n\nbutton::after {\n top: -3px;\n left: -3px;\n border-top: 3px solid transparent;\n border-left: 3px solid transparent;\n}\n\nbutton::before {\n bottom: -3px;\n right: -3px;\n border-bottom: 3px solid transparent;\n border-right: 3px solid transparent;\n}\n\nbutton:hover {\n color: #0668C9;\n cursor: pointer;\n}\n\nbutton:hover::after,\nbutton:hover::before {\n width: calc(50% + 3px);\n height: calc(50% + 3px);\n border-color: #0668C9;\n}"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"a36353","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":626,"cssLen":633,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cssbuttons-io-button {\n display: flex;\n align-items: center;\n font-family: inherit;\n font-weight: 500;\n font-size: 17px;\n padding: 0.8em 1.5em 0.8em 1.2em;\n color: white;\n background: #ad5389;\n background: linear-gradient(0deg, rgb(120, 47, 255) 0%, rgb(185, 132, 255) 100%);\n border: none;\n box-shadow: 0 0.7em 1.5em -0.5em rgb(184, 146, 255);\n letter-spacing: 0.05em;\n border-radius: 20em;\n}\n\n.cssbuttons-io-button svg {\n margin-right: 8px;\n}\n\n.cssbuttons-io-button:hover {\n box-shadow: 0 0.5em 1.5em -0.5em rgb(149, 91, 255);\n}\n\n.cssbuttons-io-button:active {\n box-shadow: 0 0.3em 1em -0.5em rgb(160, 109, 255);\n}"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"e1a9b1","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":417,"cssLen":1138,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","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(25px);\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 stroke: 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-22T16:59:56.000Z","isPrivate":0,"projectId":"155a8d","snapshot":null,"tags":null,"title":"button by Lakshay-art","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":746,"cssLen":2667,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 0;\n background: radial-gradient(ellipse at 50% 50%,black 20%,transparent 72%);\n font-size: 17px;\n height: 200px;\n width: 300px;\n zoom: 1.2;\n}\n\n.main {\n width: 70px;\n margin: auto;\n position: relative;\n transform: rotateZ(0deg);\n isolation: isolate;\n scale: 1;\n transition: all 1.5s;\n}\n\n.main:hover {\n transform: rotateZ(240deg);\n scale: 2;\n /* filter: drop-shadow(10px,10px,10px,white); */\n filter: drop-shadow(-1px -1px 5px #69e9d6);\n}\n\n.rings {\n position: absolute;\n width: 200px;\n height: 100px;\n /* background-color: #000000; */\n border-radius: 150px 150px 0 0;\n background: radial-gradient(circle at 50% 100%,transparent 30%, #69e9d6 40%,#404D44 50%,#44867c 60%,#404D44 70%,transparent);\n}\n\n#saturn {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n background: linear-gradient(80deg,#69e9d6,#404D44,#000000);\n}\n\n#ring1 {\n transform: rotateX(80deg);\n top: -20px;\n left: -65px;\n}\n\n#ring2 {\n transform: rotateX(-100deg);\n left: -65px;\n z-index: -1;\n top: -3px;\n}\n\n.asteriods-large {\n position: absolute;\n width: 8px;\n height: 10px;\n border-radius: 15px 8px;\n background: linear-gradient(220deg,#6f7776,#598ea3,#311515);\n transform: rotateZ(0deg);\n transition: all 3s;\n}\n\n#asteriod1 {\n top: 8px;\n height: 12px;\n width: 12px;\n border-radius: 50%;\n}\n\n#asteriod2 {\n top: 35px;\n height: 10px;\n left: -55px;\n}\n\n#asteriod3 {\n top: 35px;\n height: 8px;\n left: 85px;\n}\n\n#asteriod4 {\n top: 40px;\n height: 4px;\n width: 4px;\n left: -40px;\n}\n\n#asteriod5 {\n top: 35px;\n height: 4px;\n width: 4px;\n left: 82px;\n}\n\n.asteriods-small {\n position: absolute;\n width: 4px;\n height: 3px;\n border-radius: 15px 8px;\n background: linear-gradient(80deg,#6f7776,#598ea3,#311515);\n transform-origin: 50px 50px;\n transform: rotateZ(0deg);\n transition: all 3s;\n}\n\n#asteriod6 {\n top: 6px;\n left: -5px;\n border-radius: 50%;\n}\n\n#asteriod7 {\n top: 15px;\n left: -35px;\n}\n\n#asteriod8 {\n top: 35px;\n left: 65px;\n}\n\n#asteriod9 {\n top: 60px;\n left: -10px;\n}\n\n#asteriod10 {\n top: 15px;\n left: 112px;\n}\n\n#explore {\n position: absolute;\n top: 32px;\n font-size: 15px;\n color: hsl(171, 59%, 74%);\n left: 10px;\n transition: all 3s;\n}\n\n.main:hover > .asteriods-large,.main:hover > .asteriods-small {\n transform: translateX(28px);\n}\n\n.main:hover > #explore {\n translate: -10px 20px;\n transform: rotateZ(120deg);\n}\n\n.main:not(hover) > #explore {\n translate: 0px;\n transform: rotateZ(0deg);\n}\n\n.main:not(hover) > .asteriods-large,.main:not(hover) > .asteriods-small {\n transform: translateX(0px);\n}\n\n.main:is(:active) > #explore {\n translate: -100px 200px;\n}\n\n.main:is(:active) {\n translate: -200px;\n}\n\n"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"237e26","snapshot":null,"tags":null,"title":"button by JohnnyCSilva","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":873,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn_center {\n display: table-cell;\n vertical-align: middle;\n border: none;\n background-color: transparent;\n}\n\n.btn_center {\n color: white;\n margin: auto;\n width: 150px;\n line-height: 50px;\n font-size: 12px;\n letter-spacing: 2px;\n border-radius: 0px;\n font-weight: bold;\n text-transform: uppercase;\n background-color: #031d67;\n box-shadow: 0px 15px 18px -6px rgba(35, 22, 214, 0.65);\n transition: all 0.4s;\n -webkit-transition: all 0.4s;\n -moz-transition: all 0.4s;\n -ms-transition: all 0.4s;\n -o-transition: all 0.4s;\n position: relative;\n}\n\n.btn_center:hover {\n background-color: #051749;\n box-shadow: 0px 22px 19px -8px rgba(16, 8, 119, 0.65);\n transform: scale(1.02,1.02);\n}\n\n.btn_center:active {\n background-color: #051749;\n box-shadow: 0px 12px 18px -4px rgba(7, 4, 51, 0.65);\n transform: scale(0.95,0.95);\n transition: all 0.4s -0.125s;\n}"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"25025b","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":355,"cssLen":507,"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: #95D03A;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 0 10px;\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: 17px;\n height: 17px;\n}"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"bddd6d","snapshot":null,"tags":null,"title":"button by OnCloud125252","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":2519,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* Note that you only needs to edit the config to customize the button! */\n\n.signInButton {\n /* Config start */\n --signIn_width: 6rem;\n --signIn_height: 2.5rem;\n --signIn_bottomLeftTriangleSideLength: 1rem;\n --signIn_topRightTriangleSideLength: 0.9rem;\n /* Config end */\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid white;\n width: 6rem;\n height: 2.5rem;\n background-color: #000000;\n overflow: hidden;\n}\n\n.signInButton::before {\n position: absolute;\n content: \"\";\n bottom: 0;\n left: 0;\n width: 0;\n height: 0;\n border-width: 0 var(--signIn_bottomLeftTriangleSideLength) var(--signIn_bottomLeftTriangleSideLength) 0;\n border-style: solid;\n border-color: transparent transparent white transparent;\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n}\n\n.signInButton::after {\n position: absolute;\n content: \"\";\n top: 0;\n right: 0;\n width: calc(var(--signIn_topRightTriangleSideLength) * 1.4142135623730950488016887242097);\n height: calc(var(--signIn_topRightTriangleSideLength) * 1.4142135623730950488016887242097);\n outline: 1px solid white;\n transform: translate(50%, -50%) rotate(45deg);\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n}\n\n.signInButton:hover {\n cursor: pointer;\n}\n\n.signInButton:hover::before {\n --signIn_bottomLeftTriangleSideLength: calc(var(--signIn_width) + var(--signIn_height) - var(--signIn_topRightTriangleSideLength) + (var(--signIn_topRightTriangleSideLength) * 0.3));\n}\n\n.signInButton:focus-visible::before {\n --signIn_bottomLeftTriangleSideLength: calc(var(--signIn_width) + var(--signIn_height) - var(--signIn_topRightTriangleSideLength) + (var(--signIn_topRightTriangleSideLength) * 0.3));\n}\n\n.signInButton:hover::after {\n transform: translate(calc(50% + var(--signIn_topRightTriangleSideLength) * 0.1), calc((50% + var(--signIn_topRightTriangleSideLength) * 0.1) * -1)) rotate(45deg);\n}\n\n.signInButton:focus-visible::after {\n transform: translate(calc(50% + var(--signIn_topRightTriangleSideLength) * 0.1), calc((50% + var(--signIn_topRightTriangleSideLength) * 0.1) * -1)) rotate(45deg);\n}\n\n.signInButton:hover>.signInButtonText {\n color: black;\n}\n\n.signInButton:focus-visible>.signInButtonText {\n color: black;\n}\n\n.signInButtonText {\n margin: auto 0;\n color: white;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n z-index: 1;\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n}"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"3d12c7","snapshot":null,"tags":null,"title":"button by mRcOol7","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":880,"cssLen":9664,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n See more\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.relative {\n position: relative;\n}\n.h-16 {\n height: 4rem;\n}\n.w-64 {\n width: 16rem;\n}\n.origin-left {\n transform-origin: left;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.border {\n border-width: 1px;\n}\n.bg-indigo-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(55 48 163 / var(--tw-bg-opacity));\n}\n.p-3 {\n padding: 0.75rem;\n}\n.text-left {\n text-align: left;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-indigo-200 {\n --tw-text-opacity: 1;\n color: rgb(199 210 254 / var(--tw-text-opacity));\n}\n.underline {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n.underline-offset-2 {\n text-underline-offset: 2px;\n}\n.duration-500 {\n transition-duration: 500ms;\n}\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute;\n}\n.before\\:right-1::before {\n content: var(--tw-content);\n right: 0.25rem;\n}\n.before\\:top-1::before {\n content: var(--tw-content);\n top: 0.25rem;\n}\n.before\\:z-10::before {\n content: var(--tw-content);\n z-index: 10;\n}\n.before\\:h-12::before {\n content: var(--tw-content);\n height: 3rem;\n}\n.before\\:w-12::before {\n content: var(--tw-content);\n width: 3rem;\n}\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px;\n}\n.before\\:bg-orange-500::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity));\n}\n.before\\:blur-lg::before {\n content: var(--tw-content);\n --tw-blur: blur(16px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)\n var(--tw-sepia) var(--tw-drop-shadow);\n}\n.before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms;\n}\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n}\n.after\\:right-8::after {\n content: var(--tw-content);\n right: 2rem;\n}\n.after\\:top-3::after {\n content: var(--tw-content);\n top: 0.75rem;\n}\n.after\\:z-10::after {\n content: var(--tw-content);\n z-index: 10;\n}\n.after\\:h-20::after {\n content: var(--tw-content);\n height: 5rem;\n}\n.after\\:w-20::after {\n content: var(--tw-content);\n width: 5rem;\n}\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px;\n}\n.after\\:bg-pink-500::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.after\\:blur-lg::after {\n content: var(--tw-content);\n --tw-blur: blur(16px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)\n var(--tw-sepia) var(--tw-drop-shadow);\n}\n.after\\:duration-500::after {\n content: var(--tw-content);\n transition-duration: 500ms;\n}\n.hover\\:border-green-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(34 197 94 / var(--tw-border-opacity));\n}\n.hover\\:text-green-500:hover {\n --tw-text-opacity: 1;\n color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n.hover\\:decoration-2:hover {\n text-decoration-thickness: 2px;\n}\n.hover\\:underline-offset-4:hover {\n text-underline-offset: 4px;\n}\n.hover\\:duration-500:hover {\n transition-duration: 500ms;\n}\n.hover\\:before\\:-bottom-8:hover::before {\n content: var(--tw-content);\n bottom: -2rem;\n}\n.hover\\:before\\:right-12:hover::before {\n content: var(--tw-content);\n right: 3rem;\n}\n.hover\\:before\\:blur:hover::before {\n content: var(--tw-content);\n --tw-blur: blur(8px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)\n var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hover\\:before\\:\\[box-shadow\\:_20px_20px_20px_30px_\\#2ecc71\\]:hover::before {\n content: var(--tw-content);\n box-shadow: 20px 20px 20px 30px #2ecc71;\n}\n.hover\\:after\\:-right-8:hover::after {\n content: var(--tw-content);\n right: -2rem;\n}\n.group:hover .group-hover\\:before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms;\n}\n.group:hover .group-hover\\:after\\:duration-500::after {\n content: var(--tw-content);\n transition-duration: 500ms;\n}\n"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"11062d","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2011,"cssLen":726,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: rgb(20, 20, 20);\n border: none;\n font-weight: 600;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);\n cursor: pointer;\n transition-duration: 0.3s;\n overflow: hidden;\n position: relative;\n gap: 2px;\n}\n\n.svgIcon {\n width: 12px;\n transition-duration: 0.3s;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.button:hover {\n transition-duration: 0.3s;\n background-color: rgb(255, 69, 69);\n align-items: center;\n gap: 0;\n}\n\n.bin-top {\n transform-origin: bottom right;\n}\n.button:hover .bin-top {\n transition-duration: 0.5s;\n transform: rotate(160deg);\n}\n"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"cf8139","snapshot":null,"tags":null,"title":"button by santhoshsj-dev","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":253,"cssLen":1002,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n appearance: none;\n background: transparent;\n border: 0;\n color: #fff;\n cursor: pointer;\n font: inherit;\n font-weight: 500;\n line-height: 1;\n padding: 1em 1.5em;\n position: relative;\n transition: filter 0.3s;\n}\n\n.button:hover {\n filter: brightness(1.1);\n}\n\n.button:active {\n filter: brightness(0.9);\n}\n\n.button>span {\n display: block;\n position: relative;\n transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n z-index: 1;\n}\n\n.button:hover>span {\n transform: scale(1.05);\n}\n\n.button:active>span {\n transform: scale(0.95);\n}\n\n.button>svg {\n fill: #0c2cde;\n position: absolute;\n top: -5%;\n left: -5%;\n width: 110%;\n height: 110%;\n}\n\n.button>svg>path {\n transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n.button:hover>svg>path {\n d: path(\"M0,0 C0,-5 100,-5 100,0 C105,0 105,100 100,100 C100,105 0,105 0,100 C-5,100 -5,0 0,0\");\n}\n\n.button:active>svg>path {\n d: path(\"M0,0 C30,10 70,10 100,0 C95,30 95,70 100,100 C70,90 30,90 0,100 C5,70 5,30 0,0\");\n}"}]}},"actionData":null,"errors":null}