{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"3e9d6e","snapshot":null,"tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":177,"cssLen":1801,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Buy Tickets\n \n \n","css":".fancy {\n background-color: transparent;\n border: 2px solid #000;\n border-radius: 0;\n box-sizing: border-box;\n color: #fff;\n cursor: pointer;\n display: inline-block;\n float: right;\n font-weight: 700;\n letter-spacing: 0.05em;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 1.25em 2em;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-transform: none;\n transition: all 0.3s ease-in-out;\n user-select: none;\n font-size: 13px;\n}\n\n.fancy::before {\n content: \" \";\n width: 1.5625rem;\n height: 2px;\n background: black;\n top: 50%;\n left: 1.5em;\n position: absolute;\n transform: translateY(-50%);\n transform-origin: center;\n transition: background 0.3s linear, width 0.3s linear;\n}\n\n.fancy .text {\n font-size: 1.125em;\n line-height: 1.33333em;\n padding-left: 2em;\n display: block;\n text-align: left;\n transition: all 0.3s ease-in-out;\n text-transform: uppercase;\n text-decoration: none;\n color: black;\n}\n\n.fancy .top-key {\n height: 2px;\n width: 1.5625rem;\n top: -2px;\n left: 0.625rem;\n position: absolute;\n background: #e8e8e8;\n transition: width 0.5s ease-out, left 0.3s ease-out;\n}\n\n.fancy .bottom-key-1 {\n height: 2px;\n width: 1.5625rem;\n right: 1.875rem;\n bottom: -2px;\n position: absolute;\n background: #e8e8e8;\n transition: width 0.5s ease-out, right 0.3s ease-out;\n}\n\n.fancy .bottom-key-2 {\n height: 2px;\n width: 0.625rem;\n right: 0.625rem;\n bottom: -2px;\n position: absolute;\n background: #e8e8e8;\n transition: width 0.5s ease-out, right 0.3s ease-out;\n}\n\n.fancy:hover {\n color: white;\n background: black;\n}\n\n.fancy:hover::before {\n width: 0.9375rem;\n background: white;\n}\n\n.fancy:hover .text {\n color: white;\n padding-left: 1.5em;\n}\n\n.fancy:hover .top-key {\n left: -2px;\n width: 0px;\n}\n\n.fancy:hover .bottom-key-1,\n .fancy:hover .bottom-key-2 {\n right: 0;\n width: 0;\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"1f7df5","snapshot":null,"tags":null,"title":"button by nikk7007","updated":"2024-01-22T16:59:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":1014,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --color: #00A97F;\n --color2: rgb(10, 25, 30);\n padding: 0.8em 1.75em;\n background-color: transparent;\n border-radius: 6px;\n border: .3px solid var(--color);\n transition: .5s;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n z-index: 1;\n font-weight: 300;\n font-size: 17px;\n font-family: 'Roboto', 'Segoe UI', sans-serif;\n text-transform: uppercase;\n color: var(--color);\n}\n\n.btn::after, .btn::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n transform: skew(90deg) translate(-50%, -50%);\n position: absolute;\n inset: 50%;\n left: 25%;\n z-index: -1;\n transition: .5s ease-out;\n background-color: var(--color);\n}\n\n.btn::before {\n top: -50%;\n left: -25%;\n transform: skew(90deg) rotate(180deg) translate(-50%, -50%);\n}\n\n.btn:hover::before {\n transform: skew(45deg) rotate(180deg) translate(-50%, -50%);\n}\n\n.btn:hover::after {\n transform: skew(45deg) translate(-50%, -50%);\n}\n\n.btn:hover {\n color: var(--color2);\n}\n\n.btn:active {\n filter: brightness(.7);\n transform: scale(.98);\n}"},{"created":"2024-01-22T16:59:40.000Z","isPrivate":0,"projectId":"2dd758","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":505,"cssLen":814,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n width: 130px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(15, 15, 15);\n border: none;\n color: white;\n font-weight: 600;\n gap: 8px;\n cursor: pointer;\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);\n position: relative;\n overflow: hidden;\n transition-duration: .3s;\n}\n\n.svgIcon {\n width: 16px;\n}\n\n.svgIcon path {\n fill: white;\n}\n\n.Btn::before {\n width: 130px;\n height: 130px;\n position: absolute;\n content: \"\";\n background-color: white;\n border-radius: 50%;\n left: -100%;\n top: 0;\n transition-duration: .3s;\n mix-blend-mode: difference;\n}\n\n.Btn:hover::before {\n transition-duration: .3s;\n transform: translate(100%,-50%);\n border-radius: 0;\n}\n\n.Btn:active {\n transform: translate(5px,5px);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"56e5aa","snapshot":"https://s1.qingting.work/runjs/6973cef098d1.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by faizanullah1999","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":2054,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".primary-button {\n font-family: 'Ropa Sans', sans-serif;\n /* font-family: 'Valorant', sans-serif; */\n color: white;\n cursor: pointer;\n font-size: 13px;\n font-weight: bold;\n letter-spacing: 0.05rem;\n border: 1px solid #0E1822;\n padding: 0.8rem 2.1rem;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 /* fill: %230E1822; */ %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A\");\n background-color: #0E1822;\n background-size: 200%;\n background-position: 200%;\n background-repeat: no-repeat;\n transition: 0.3s ease-in-out;\n transition-property: background-position, border, color;\n position: relative;\n z-index: 1;\n}\n\n.primary-button:hover {\n border: 1px solid #FF4655;\n color: white;\n background-position: 40%;\n}\n\n.primary-button:before {\n content: \"\";\n position: absolute;\n background-color: #0E1822;\n width: 0.2rem;\n height: 0.2rem;\n top: -1px;\n left: -1px;\n transition: background-color 0.15s ease-in-out;\n}\n\n.primary-button:hover:before {\n background-color: white;\n}\n\n.primary-button:hover:after {\n background-color: white;\n}\n\n.primary-button:after {\n content: \"\";\n position: absolute;\n background-color: #FF4655;\n width: 0.3rem;\n height: 0.3rem;\n bottom: -1px;\n right: -1px;\n transition: background-color 0.15s ease-in-out;\n}\n\n.button-borders {\n position: relative;\n width: fit-content;\n height: fit-content;\n}\n\n.button-borders:before {\n content: \"\";\n position: absolute;\n width: calc(100% + 0.5em);\n height: 50%;\n left: -0.3em;\n top: -0.3em;\n border: 1px solid #0E1822;\n border-bottom: 0px;\n /* opacity: 0.3; */\n}\n\n.button-borders:after {\n content: \"\";\n position: absolute;\n width: calc(100% + 0.5em);\n height: 50%;\n left: -0.3em;\n bottom: -0.3em;\n border: 1px solid #0E1822;\n border-top: 0px;\n /* opacity: 0.3; */\n z-index: 0;\n}\n\n.shape {\n fill: #0E1822;\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"759f7e","snapshot":"https://s1.qingting.work/runjs/c4fdca2db83b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Gaurav-WebDev","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1068,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n height: 50px;\n width: 150px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all 0.5s ease-in-out;\n}\n\n.button:hover {\n box-shadow: .5px .5px 150px #252525;\n}\n\n.type1::after {\n content: \"Thanks\";\n height: 50px;\n width: 150px;\n background-color: #008080;\n color: #fff;\n position: absolute;\n top: 0%;\n left: 0%;\n transform: translateY(50px);\n font-size: 1.2rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.5s ease-in-out;\n}\n\n.type1::before {\n content: \"Hover Me\";\n height: 50px;\n width: 150px;\n background-color: #fff;\n color: #008080;\n position: absolute;\n top: 0%;\n left: 0%;\n transform: translateY(0px) scale(1.2);\n font-size: 1.2rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.5s ease-in-out;\n}\n\n.type1:hover::after {\n transform: translateY(0) scale(1.2);\n}\n\n.type1:hover::before {\n transform: translateY(-50px) scale(0) rotate(120deg);\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"e05ab4","snapshot":"https://s1.qingting.work/runjs/af06f8a7bd6e.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Custyyyy","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36,"cssLen":1062,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"#bottone5 {\n align-items: center;\n background-color: #FFFFFF;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: .25rem;\n box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;\n box-sizing: border-box;\n color: rgba(0, 0, 0, 0.85);\n cursor: pointer;\n display: inline-flex;\n font-family: system-ui,-apple-system,system-ui,\"Helvetica Neue\",Helvetica,Arial,sans-serif;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n line-height: 1.25;\n min-height: 3rem;\n padding: calc(.875rem - 1px) calc(1.5rem - 1px);\n text-decoration: none;\n transition: all 250ms;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n vertical-align: baseline;\n width: auto;\n}\n\n#bottone5:hover,\n#bottone5:focus {\n border-color: rgba(0, 0, 0, 0.15);\n box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;\n color: rgba(0, 0, 0, 0.65);\n}\n\n#bottone5:hover {\n transform: translateY(-1px);\n}\n\n#bottone5:active {\n background-color: #F0F0F1;\n border-color: rgba(0, 0, 0, 0.15);\n box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;\n color: rgba(0, 0, 0, 0.65);\n transform: translateY(0);\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"d35d94","snapshot":"https://s1.qingting.work/runjs/e1841a80a80f.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by nikk7007","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":854,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --color: #00A97F;\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}\n\n.button:active {\n filter: brightness(.8);\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"d32ac1","snapshot":"https://s1.qingting.work/runjs/4047e5685016.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Shakil-Babu","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":493,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n background-color: #00BFA6;\n padding: 14px 40px;\n color: #fff;\n text-transform: uppercase;\n letter-spacing: 2px;\n cursor: pointer;\n border-radius: 10px;\n border: 2px dashed #00BFA6;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n transition: .4s;\n}\n\n.btn span:last-child {\n display: none;\n}\n\n.btn:hover {\n transition: .4s;\n border: 2px dashed #00BFA6;\n background-color: #fff;\n color: #00BFA6;\n}\n\n.btn:active {\n background-color: #87dbd0;\n}\n\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"3382f2","snapshot":"https://s1.qingting.work/runjs/7eb244549b46.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by mrtqzbek11","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":669,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n width: 165px;\n height: 62px;\n cursor: pointer;\n color: #fff;\n font-size: 17px;\n border-radius: 1rem;\n border: none;\n position: relative;\n background: #100720;\n transition: 0.1s;\n}\n\nbutton::after {\n content: '';\n width: 100%;\n height: 100%;\n background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );\n filter: blur(15px);\n z-index: -1;\n position: absolute;\n left: 0;\n top: 0;\n}\n\nbutton:active {\n transform: scale(0.9) rotate(3deg);\n background: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );\n transition: 0.5s;\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"5e6715","snapshot":"https://s1.qingting.work/runjs/d0141db4ad5e.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":879,"cssLen":3760,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".relative{position:relative}.h-16{height:4rem}.w-64{width:16rem}.origin-left{transform-origin:left}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.p-3{padding:0.75rem}.text-left{text-align:left}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.duration-500{transition-duration:500ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-1::before{content:var(--tw-content);right:0.25rem}.before\\:top-1::before{content:var(--tw-content);top:0.25rem}.before\\:z-10::before{content:var(--tw-content);z-index:10}.before\\:h-12::before{content:var(--tw-content);height:3rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\\:blur-lg::before{content:var(--tw-content);--tw-blur:blur(16px);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)}.before\\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:right-8::after{content:var(--tw-content);right:2rem}.after\\:top-3::after{content:var(--tw-content);top:0.75rem}.after\\:z-10::after{content:var(--tw-content);z-index:10}.after\\:h-20::after{content:var(--tw-content);height:5rem}.after\\:w-20::after{content:var(--tw-content);width:5rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-rose-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.after\\:blur-lg::after{content:var(--tw-content);--tw-blur:blur(16px);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)}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\\:border-rose-300:hover{--tw-border-opacity:1;border-color:rgb(253 164 175 / var(--tw-border-opacity))}.hover\\:text-rose-300:hover{--tw-text-opacity:1;color:rgb(253 164 175 / var(--tw-text-opacity))}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\\:decoration-2:hover{text-decoration-thickness:2px}.hover\\:underline-offset-4:hover{text-underline-offset:4px}.hover\\:duration-500:hover{transition-duration:500ms}.hover\\:before\\:-bottom-8:hover::before{content:var(--tw-content);bottom:-2rem}.hover\\:before\\:right-12:hover::before{content:var(--tw-content);right:3rem}.hover\\:before\\:blur:hover::before{content:var(--tw-content);--tw-blur:blur(8px);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)}.hover\\:before\\:\\[box-shadow\\:_20px_20px_20px_30px_\\#a21caf\\]:hover::before{content:var(--tw-content);box-shadow:20px 20px 20px 30px #a21caf}.hover\\:after\\:-right-8:hover::after{content:var(--tw-content);right:-2rem}.group:hover .group-hover\\:before\\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.group:hover .group-hover\\:after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"22c575","snapshot":"https://s1.qingting.work/runjs/dc9d32831d8b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by doniaskima","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":223,"cssLen":1935,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-53,\n.btn-53 *,\n.btn-53 :after,\n.btn-53 :before,\n.btn-53:after,\n.btn-53:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-53 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n}\n\n.btn-53:disabled {\n cursor: default;\n}\n\n.btn-53:-moz-focusring {\n outline: auto;\n}\n\n.btn-53 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-53 [hidden] {\n display: none;\n}\n\n.btn-53 {\n border: 1px solid;\n border-radius: 999px;\n box-sizing: border-box;\n display: block;\n font-weight: 900;\n overflow: hidden;\n padding: 1.2rem 3rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-53 .original {\n background: #fff;\n color: #000;\n display: grid;\n inset: 0;\n place-content: center;\n position: absolute;\n transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);\n}\n\n.btn-53:hover .original {\n transform: translateY(100%);\n}\n\n.btn-53 .letters {\n display: inline-flex;\n}\n\n.btn-53 span {\n opacity: 0;\n transform: translateY(-15px);\n transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.2s;\n}\n\n.btn-53 span:nth-child(2n) {\n transform: translateY(15px);\n}\n\n.btn-53:hover span {\n opacity: 1;\n transform: translateY(0);\n}\n\n.btn-53:hover span:nth-child(2) {\n transition-delay: 0.1s;\n}\n\n.btn-53:hover span:nth-child(3) {\n transition-delay: 0.2s;\n}\n\n.btn-53:hover span:nth-child(4) {\n transition-delay: 0.3s;\n}\n\n.btn-53:hover span:nth-child(5) {\n transition-delay: 0.4s;\n}\n\n.btn-53:hover span:nth-child(6) {\n transition-delay: 0.5s;\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"6328fc","snapshot":"https://s1.qingting.work/runjs/3c53f305b8b4.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1707,"cssLen":836,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":"button {\n background: transparent;\n position: relative;\n padding: 5px 15px;\n display: flex;\n align-items: center;\n font-size: 17px;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n border: 1px solid rgb(255,0,0);\n border-radius: 25px;\n outline: none;\n overflow: hidden;\n color: rgb(255,0,0);\n transition: color 0.3s 0.1s ease-out;\n text-align: center;\n}\n\nbutton span {\n margin: 10px;\n}\n\nbutton::before {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n content: '';\n border-radius: 50%;\n display: block;\n width: 20em;\n height: 20em;\n left: -5em;\n text-align: center;\n transition: box-shadow 0.5s ease-out;\n z-index: -1;\n}\n\nbutton:hover {\n color: #fff;\n border: 1px solid rgb(255,0,0);\n}\n\nbutton:hover::before {\n box-shadow: inset 0 0 0 10em rgb(255, 0, 0);\n}"}]}},"actionData":null,"errors":null}