{"loaderData":{"0":null,"0-2":{"total":7100,"projects":[{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"51e17e","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":168,"cssLen":1770,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n border: none;\n background: none;\n color: #0f1923;\n cursor: pointer;\n position: relative;\n padding: 8px;\n margin-bottom: 20px;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 14px;\n transition: all .15s ease;\n}\n\n.button::before,\n.button::after {\n content: '';\n display: block;\n position: absolute;\n right: 0;\n left: 0;\n height: calc(50% - 5px);\n border: 1px solid #7D8082;\n transition: all .15s ease;\n}\n\n.button::before {\n top: 0;\n border-bottom-width: 0;\n}\n\n.button::after {\n bottom: 0;\n border-top-width: 0;\n}\n\n.button:active,\n.button:focus {\n outline: none;\n}\n\n.button:active::before,\n.button:active::after {\n right: 3px;\n left: 3px;\n}\n\n.button:active::before {\n top: 3px;\n}\n\n.button:active::after {\n bottom: 3px;\n}\n\n.button_lg {\n position: relative;\n display: block;\n padding: 10px 20px;\n color: #fff;\n background-color: #0f1923;\n overflow: hidden;\n box-shadow: inset 0px 0px 0px 1px transparent;\n}\n\n.button_lg::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 2px;\n height: 2px;\n background-color: #0f1923;\n}\n\n.button_lg::after {\n content: '';\n display: block;\n position: absolute;\n right: 0;\n bottom: 0;\n width: 4px;\n height: 4px;\n background-color: #0f1923;\n transition: all .2s ease;\n}\n\n.button_sl {\n display: block;\n position: absolute;\n top: 0;\n bottom: -1px;\n left: -8px;\n width: 0;\n background-color: #ff4655;\n transform: skew(-15deg);\n transition: all .2s ease;\n}\n\n.button_text {\n position: relative;\n}\n\n.button:hover {\n color: #0f1923;\n}\n\n.button:hover .button_sl {\n width: calc(100% + 15px);\n}\n\n.button:hover .button_lg::after {\n background-color: #fff;\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"4b9528","snapshot":null,"tags":null,"title":"button by david-mohseni","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":448,"cssLen":1756,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Facebook\n \n
\n Twitter\n \n
\n Instagram\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 .facebook:hover,\n.wrapper .facebook:hover .tooltip,\n.wrapper .facebook:hover .tooltip::before {\n background: #1877F2;\n color: #fff;\n}\n\n.wrapper .twitter:hover,\n.wrapper .twitter:hover .tooltip,\n.wrapper .twitter:hover .tooltip::before {\n background: #1DA1F2;\n color: #fff;\n}\n\n.wrapper .instagram:hover,\n.wrapper .instagram:hover .tooltip,\n.wrapper .instagram:hover .tooltip::before {\n background: #E4405F;\n color: #fff;\n}\n\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"1a4361","snapshot":null,"tags":null,"title":"button by shah1345","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button2 {\n display: inline-block;\n transition: all 0.2s ease-in;\n position: relative;\n overflow: hidden;\n z-index: 1;\n color: #090909;\n padding: 0.7em 1.7em;\n cursor: pointer;\n font-size: 18px;\n border-radius: 0.5em;\n background: #e8e8e8;\n border: 1px solid #e8e8e8;\n box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;\n}\n\n.button2:active {\n color: #666;\n box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;\n}\n\n.button2:before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%) scaleY(1) scaleX(1.25);\n top: 100%;\n width: 140%;\n height: 180%;\n background-color: rgba(0, 0, 0, 0.05);\n border-radius: 50%;\n display: block;\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\n z-index: -1;\n}\n\n.button2:after {\n content: \"\";\n position: absolute;\n left: 55%;\n transform: translateX(-50%) scaleY(1) scaleX(1.45);\n top: 180%;\n width: 160%;\n height: 190%;\n background-color: #009087;\n border-radius: 50%;\n display: block;\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\n z-index: -1;\n}\n\n.button2:hover {\n color: #ffffff;\n border: 1px solid #009087;\n}\n\n.button2:hover:before {\n top: -35%;\n background-color: #009087;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n\n.button2:hover:after {\n top: -45%;\n background-color: #009087;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"57e5d7","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":536,"cssLen":866,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n font-family: inherit;\n font-size: 20px;\n background: royalblue;\n color: white;\n padding: 0.7em 1em;\n padding-left: 0.9em;\n display: flex;\n align-items: center;\n border: none;\n border-radius: 16px;\n overflow: hidden;\n transition: all 0.2s;\n cursor: pointer;\n}\n\nbutton span {\n display: block;\n margin-left: 0.3em;\n transition: all 0.3s ease-in-out;\n}\n\nbutton svg {\n display: block;\n transform-origin: center center;\n transition: transform 0.3s ease-in-out;\n}\n\nbutton:hover .svg-wrapper {\n animation: fly-1 0.6s ease-in-out infinite alternate;\n}\n\nbutton:hover svg {\n transform: translateX(1.2em) rotate(45deg) scale(1.1);\n}\n\nbutton:hover span {\n transform: translateX(5em);\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\n@keyframes fly-1 {\n from {\n transform: translateY(0.1em);\n }\n\n to {\n transform: translateY(-0.1em);\n }\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"98ae4e","snapshot":null,"tags":null,"title":"button by alexmaracinaru","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":711,"cssLen":507,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n cursor: pointer;\n font-weight: 700;\n font-family: Helvetica,\"sans-serif\";\n transition: all .2s;\n padding: 10px 20px;\n border-radius: 100px;\n background: #cfef00;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n font-size: 15px;\n}\n\nbutton:hover {\n background: #c4e201;\n}\n\nbutton > svg {\n width: 34px;\n margin-left: 10px;\n transition: transform .3s ease-in-out;\n}\n\nbutton:hover svg {\n transform: translateX(5px);\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"10ef0b","snapshot":null,"tags":null,"title":"button by alshahwan","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1272,"cssLen":618,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #fff;\n border: 1px solid #25D366;\n padding: 5px;\n position: relative;\n width: 6.2em;\n height: 2em;\n transition: 0.5s;\n font-size: 17px;\n border-radius: 0.4em;\n}\n\nbutton p {\n position: absolute;\n top: 0.4em;\n left: 1.15em;\n margin: 0;\n padding: 0;\n transition: .5s;\n color: #25D366;\n}\n\nbutton svg {\n position: absolute;\n top: 0.45em;\n right: 0.5em;\n margin: 0;\n padding: 0;\n opacity: 0;\n transition: 0.5s;\n height: 1em;\n fill: #fff\n}\n\nbutton:hover p {\n left: 0.5em;\n color: #fff\n}\n\nbutton:hover svg {\n opacity: 1;\n}\n\nbutton:hover {\n background-color: #25D366;\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"e852a9","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":2351,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-96,\n.btn-96 *,\n.btn-96 :after,\n.btn-96 :before,\n.btn-96:after,\n.btn-96:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-96 {\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-96:disabled {\n cursor: default;\n}\n\n.btn-96:-moz-focusring {\n outline: auto;\n}\n\n.btn-96 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-96 [hidden] {\n display: none;\n}\n\n.btn-96 {\n box-sizing: border-box;\n display: block;\n font-weight: 900;\n -webkit-mask-image: none;\n padding: 2rem 5rem;\n perspective: 800px;\n position: relative;\n text-transform: uppercase;\n transform-style: preserve-3d;\n}\n\n.btn-96 span {\n background: #fff;\n color: #000;\n display: grid;\n inset: 0;\n place-items: center;\n position: absolute;\n transform: rotateX(0deg);\n transform-origin: top center;\n transition: 0.2s;\n}\n\n.btn-96:hover span {\n transform: rotateX(35deg);\n}\n\n.btn-96:after,\n.btn-96:before {\n background: #ddd;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n transform: rotateX(0deg);\n width: 100%;\n z-index: -1;\n}\n\n.btn-96:after {\n background: #ccc;\n width: 0;\n}\n\n.btn-96:hover:after {\n -webkit-animation: progress-bar 1.2s;\n animation: progress-bar 1.2s;\n}\n\n@-webkit-keyframes progress-bar {\n 0% {\n opacity: 1;\n width: 0;\n }\n\n 10% {\n opacity: 1;\n width: 15%;\n }\n\n 25% {\n opacity: 1;\n width: 25%;\n }\n\n 40% {\n opacity: 1;\n width: 35%;\n }\n\n 55% {\n opacity: 1;\n width: 75%;\n }\n\n 60% {\n opacity: 1;\n width: 100%;\n }\n\n to {\n opacity: 0;\n width: 100%;\n }\n}\n\n@keyframes progress-bar {\n 0% {\n opacity: 1;\n width: 0;\n }\n\n 10% {\n opacity: 1;\n width: 15%;\n }\n\n 25% {\n opacity: 1;\n width: 25%;\n }\n\n 40% {\n opacity: 1;\n width: 35%;\n }\n\n 55% {\n opacity: 1;\n width: 75%;\n }\n\n 60% {\n opacity: 1;\n width: 100%;\n }\n\n to {\n opacity: 0;\n width: 100%;\n }\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"7b663c","snapshot":null,"tags":null,"title":"button by ernestnash","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":554,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\nI am a button","css":".btn {\n display: inline-block;\n padding: 0.9rem 1.8rem;\n font-size: 16px;\n font-weight: 700;\n color: white;\n border: 3px solid rgb(252, 70, 100);\n cursor: pointer;\n position: relative;\n background-color: transparent;\n text-decoration: none;\n overflow: hidden;\n z-index: 1;\n font-family: inherit;\n}\n\n.btn::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgb(252, 70, 100);\n transform: translateX(-100%);\n transition: all .3s;\n z-index: -1;\n}\n\n.btn:hover::before {\n transform: translateX(0);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"6dbe5c","snapshot":null,"tags":null,"title":"button by njesenberger","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":159,"cssLen":2290,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n -webkit-appearance: none;\n appearance: none;\n position: relative;\n border-width: 0;\n padding: 0 8px 12px;\n min-width: 10em;\n box-sizing: border-box;\n background: transparent;\n font: inherit;\n cursor: pointer;\n}\n\n.button-top {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 0;\n padding: 8px 16px;\n transform: translateY(0);\n text-align: center;\n color: #fff;\n text-shadow: 0 -1px rgba(0, 0, 0, .25);\n transition-property: transform;\n transition-duration: .2s;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.button:active .button-top {\n transform: translateY(6px);\n}\n\n.button-top::after {\n content: '';\n position: absolute;\n z-index: -1;\n border-radius: 4px;\n width: 100%;\n height: 100%;\n box-sizing: content-box;\n background-image: radial-gradient(#cd3f64, #9d3656);\n text-align: center;\n color: #fff;\n box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);\n transition-property: border-radius, padding, width, transform;\n transition-duration: .2s;\n}\n\n.button:active .button-top::after {\n border-radius: 6px;\n padding: 0 2px;\n}\n\n.button-bottom {\n position: absolute;\n z-index: -1;\n bottom: 4px;\n left: 4px;\n border-radius: 8px / 16px 16px 8px 8px;\n padding-top: 6px;\n width: calc(100% - 8px);\n height: calc(100% - 10px);\n box-sizing: content-box;\n background-color: #803;\n background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);\n transition-property: border-radius, padding-top;\n transition-duration: .2s;\n}\n\n.button:active .button-bottom {\n border-radius: 10px 10px 8px 8px / 8px;\n padding-top: 0;\n}\n\n.button-base {\n position: absolute;\n z-index: -2;\n top: 4px;\n left: 0;\n border-radius: 12px;\n width: 100%;\n height: calc(100% - 4px);\n background-color: rgba(0, 0, 0, .15);\n box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"ea68ad","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1087,"cssLen":498,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n max-width: 320px;\n display: flex;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n border: 1px solid rgba(0, 0, 0, 0.25);\n gap: 0.75rem;\n color: rgb(65, 63, 63);\n background-color: #fff;\n cursor: pointer;\n transition: all .6s ease;\n}\n\n.button svg {\n height: 24px;\n}\n\nbutton:hover {\n transform: scale(1.02);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"7f536d","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":403,"cssLen":779,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 120px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 12px;\n cursor: pointer;\n border: 3px solid rgb(255, 239, 94);\n background-color: rgb(255, 239, 94);\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);\n}\n\n.text {\n width: 70%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(27, 27, 27);\n color: white;\n}\n\n.arrow path {\n fill: rgb(19, 19, 19);\n}\n\n.button:hover .arrow {\n animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n}\n\n@keyframes slide-in-left {\n 0% {\n transform: translateX(-8px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0px);\n opacity: 1;\n }\n}\n\n.button:active {\n transform: scale(0.97);\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"18c283","snapshot":null,"tags":null,"title":"button by Codecite","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":2532,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --fancy-button-gradient-0: #8d49fd;\n --fancy-button-gradient-50: #7f56f3;\n --fancy-button-gradient-100: #5691f3;\n --fancy-button-inner-shadow-top: rgba(233, 209, 255, 0.2);\n --fancy-button-inner-shadow-top-lg: rgba(9, 12, 60, 0.1);\n --fancy-button-inner-shadow-bottom: rgba(137, 222, 246, 0.3);\n --fancy-button-shine-top: #e9d1ff;\n --fancy-button-shine-bottom: #adfff9;\n font-family: 'Poppins';\n font-weight: 500;\n font-size: 15px;\n line-height: 21px;\n text-shadow: 0px 0.5px 0.5px rgba(0, 0, 0, 0.2);\n padding: 0;\n margin: 0;\n appearance: none;\n border: none;\n outline: none;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n z-index: 1;\n border-radius: 25px;\n color: #fff;\n background-image: linear-gradient(to bottom, var(--fancy-button-gradient-0) 0%, var(--fancy-button-gradient-50) 50%, var(--fancy-button-gradient-100) 100%);\n box-shadow: 0px 4px 12px rgba(9, 12, 60, 0.15), 0px 2px 8px rgba(9, 12, 60, 0.15), 0px 1px 3px var(--fancy-button-inner-shadow-top-lg), inset 0px 1px 1px var(--fancy-button-inner-shadow-top), inset 0px -1px 3px var(--fancy-button-inner-shadow-bottom);\n}\n\n.btn:before, .btn:after {\n content: '';\n position: absolute;\n border-radius: inherit;\n will-change: transform;\n}\n\n.btn:before {\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--fancy-button-shine-top);\n width: 96px;\n height: 6px;\n top: -3px;\n opacity: 0.6;\n filter: blur(6px);\n transition: opacity 0.25s;\n}\n\n.btn:after {\n inset: 0;\n background-size: cover;\n z-index: 2;\n opacity: 0.3;\n mix-blend-mode: overlay;\n pointer-events: none;\n}\n\n.btn span {\n display: block;\n padding: 12px 24px;\n border-radius: inherit;\n overflow: hidden;\n position: relative;\n background-image: linear-gradient(to bottom, var(--fancy-button-shine-top), transparent 8px);\n background-position: 0 -6px;\n background-repeat: no-repeat;\n z-index: 1;\n}\n\n.btn span:before, .btn span:after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n border-radius: 50%;\n background-color: var(--fancy-button-shine-bottom);\n transition: opacity 0.25s, transform 0.25s;\n will-change: transform;\n}\n\n.btn span:before {\n width: 92px;\n height: 8px;\n bottom: -4px;\n opacity: 0.75;\n filter: blur(6px);\n}\n\n.btn span:after {\n width: 112px;\n height: 1px;\n bottom: 0;\n opacity: 0.9;\n filter: blur(1px);\n}\n\n.btn:hover span:before {\n opacity: 0.8;\n}\n\n.btn:hover span:before {\n transform: translateX(-50%) scale(1.25);\n}\n\n.btn:hover span:after {\n opacity: 1;\n}"}]}},"actionData":null,"errors":null}