{"html":"\n

\n \n

\n","css":".button-container {\n height: 75px;\n width: 260px;\n}\n.button {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0px;\n border-top: 2px double rgba(255, 255, 255, 0.573);\n border-bottom: none;\n border-left: 2px outset rgba(0, 0, 0, 0.494);\n border-right: 2px solid rgba(233, 79, 202, 0.7);\n border-radius: 50px;\n filter: hue-rotate(-15deg) drop-shadow(rgba(0, 0, 0, 0.157) 0px 30px 10px)\n saturate(2);\n font-family: \"poppins \", sans-serif;\n background: linear-gradient(\n 64.14deg,\n rgb(59, 130, 246) 0%,\n rgb(91, 142, 247) 10%,\n rgb(139, 92, 246) 25%,\n rgb(167, 143, 247) 40%,\n rgb(184, 124, 246) 50%,\n rgb(201, 111, 245) 60%,\n rgb(236, 72, 153) 75%,\n rgb(240, 96, 168) 85%,\n rgb(234, 91, 163) 92%,\n rgb(59, 130, 246) 100%\n );\n transition:\n transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\n filter 0.8s ease,\n box-shadow 0.8s ease;\n transform: scale(1);\n box-sizing: border-box;\n animation: hue-rotate 6s linear infinite;\n}\n@keyframes hue-rotate {\n from {\n filter: hue-rotate(0deg) drop-shadow(rgba(0, 0, 0, 0.157) 0px 30px 10px)\n saturate(2);\n }\n to {\n filter: hue-rotate(360deg) drop-shadow(rgba(0, 0, 0, 0.157) 0px 30px 10px)\n saturate(2);\n }\n}\n.button:hover {\n transform: scale(1.02);\n filter: hue-rotate(120deg) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.25))\n saturate(2.1);\n}\n.button .bg-div-2 {\n transition:\n box-shadow 0.9s ease,\n filter 0.9s ease;\n}\n.button:hover .bg-div-2 {\n box-shadow:\n inset 0 0 14px rgba(255, 255, 255, 0.25),\n inset 0 0 24px rgba(255, 120, 200, 0.35);\n filter: brightness(1.12);\n}\n.button:active {\n transform: scale(0.96);\n filter: hue-rotate(140deg) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.25))\n saturate(2.2);\n}\n.button:hover .text-two p span {\n animation-duration: 1.9s;\n}\n.text-one {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 32px 48px;\n opacity: 0;\n pointer-events: none;\n}\n\n.bg-div {\n z-index: 90;\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n.bg-inn-1 {\n position: absolute;\n border-radius: 9999px;\n filter: blur(3px) drop-shadow(-2px 0 3px #ffffff);\n left: 25.6px;\n top: 3.2px;\n width: 160px;\n height: 16px;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0.868) 30%,\n transparent 100%\n );\n}\n\n.bg-inn-2 {\n position: absolute;\n border-radius: 9999px;\n left: 40px;\n top: 32px;\n width: 64px;\n height: 32px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0) 70%\n );\n filter: drop-shadow(-10px 10px 3px #d277cc);\n}\n\n.bg-inn-3 {\n position: absolute;\n border-radius: 9999px;\n left: 160px;\n top: 8px;\n width: 80px;\n height: 80px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0) 50%\n );\n filter: drop-shadow(-5px -5px 7px #ff5500b4);\n}\n\n.bg-inn-4 {\n position: absolute;\n border-radius: 9999px;\n left: 272px;\n top: 16px;\n width: 54.4px;\n height: 64px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 1) 0%,\n transparent 70%\n );\n filter: drop-shadow(-1px 0 30px #ff002f);\n}\n\n.bg-inn-5 {\n position: absolute;\n border-radius: 9999px;\n top: 8px;\n width: 100%;\n height: 11.2px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.293) 30%,\n rgba(255, 181, 21, 0.164) 50%,\n rgba(234, 44, 255, 0.419) 60%,\n rgba(255, 255, 255, 0) 90%\n );\n}\n\n.bg-inn-6 {\n position: absolute;\n border-radius: 9999px;\n left: 281.6px;\n top: -1.6px;\n width: 32px;\n height: 32px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0) 70%\n );\n}\n\n.bg-inn-7 {\n position: absolute;\n border-radius: 9999px;\n left: 121.6px;\n transform: rotate(-35deg);\n top: -32px;\n width: 32px;\n height: 80px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.614) 0%,\n #fd87602d 60%,\n rgba(255, 255, 255, 0) 100%\n );\n}\n\n.bg-inn-8 {\n position: absolute;\n border-radius: 9999px;\n left: 88px;\n top: -16px;\n width: 48px;\n height: 48px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.614) 0%,\n rgba(255, 255, 255, 0) 80%\n );\n}\n\n.bg-inn-9 {\n position: absolute;\n border-radius: 9999px;\n filter: blur(1px) drop-shadow(0px 0 3px #ffffff);\n left: 8px;\n bottom: 22.4px;\n width: 100%;\n height: 1.6px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 1) 50%,\n rgba(255, 255, 255, 0) 90%\n );\n}\n\n.bg-inn-10 {\n position: absolute;\n border-radius: 9999px;\n filter: blur(1px) drop-shadow(0px 0 3px #ffffff);\n left: 4.8px;\n top: 16px;\n width: 16px;\n height: 48px;\n border-top: 1px solid white;\n border-right: 1px solid white;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.419) 0%,\n transparent 50%\n );\n}\n\n.bg-inn-11 {\n position: absolute;\n border-radius: 100%;\n filter: blur(4px) drop-shadow(0px -10px 10px #ff5107fb);\n left: 192px;\n top: 56px;\n width: 80px;\n height: 28.8px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.773) 10%,\n rgba(255, 255, 255, 0.159) 60%\n );\n}\n\n.bg-inn-12 {\n position: absolute;\n border-radius: 9999px;\n filter: blur(2px) drop-shadow(0px -10px 10px #f36b9d);\n left: 176px;\n top: 17.6px;\n width: 96px;\n height: 4.8px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.973) 30%,\n rgba(255, 255, 255, 0.159) 100%\n );\n}\n\n.bg-inn-13 {\n position: absolute;\n border-radius: 9999px;\n filter: blur(3px) drop-shadow(-15px 0 5px #f8283d9e);\n left: 128px;\n top: 59.2px;\n width: 88px;\n height: 27.2px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.762) 10%,\n rgba(255, 255, 255, 0.159) 70%\n );\n}\n\n.bg-inn-14 {\n position: absolute;\n border-radius: 9999px;\n filter: blur(1px) drop-shadow(10px -10px 10px #6f0424);\n transform: rotate(-35deg);\n left: 8px;\n bottom: 4.8px;\n width: 8px;\n height: 19.2px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.848) 0%,\n rgba(255, 255, 255, 0.159) 60%\n );\n}\n\n.text-two {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 90;\n\n font-family: \"poppins\", sans-serif;\n font-weight: 800;\n font-size: 25px;\n\n color: rgba(255, 255, 255, 0.85);\n text-shadow:\n 0 1px 2px rgba(0, 0, 0, 0.35),\n 0 0 6px rgba(255, 255, 255, 0.35),\n 0 0 18px rgba(255, 255, 255, 0.25);\n\n backdrop-filter: blur(1.5px);\n -webkit-backdrop-filter: blur(1.5px);\n mix-blend-mode: normal;\n}\n.text-two p {\n font-family: \"poppins\", sans-serif;\n font-weight: 900;\n font-size: 20px;\n color: #180707a2;\n letter-spacing: 3px;\n /* -webkit-text-stroke: 1.5px rgb(73, 40, 40);\n text-stroke: 1.5px rgb(255, 255, 255); */\n text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);\n display: inline-flex;\n}\n\n.text-two p span {\n display: inline-block;\n --i: 0;\n filter: url(#liquid);\n transition: transform 0.4s ease;\n}\n.text-two p span {\n animation: liquidMove 2.2s ease-in-out infinite;\n animation-delay: calc(var(--i) * 0.1s);\n}\n@keyframes liquidMove {\n 0% {\n transform: translate(0, 0) skewX(0deg);\n }\n 25% {\n transform: translate(1px, -2px) skewX(-4deg);\n }\n 50% {\n transform: translate(-1px, 2px) skewX(4deg);\n }\n 75% {\n transform: translate(1px, 1px) skewX(-2deg);\n }\n 100% {\n transform: translate(0, 0) skewX(0deg);\n }\n}\n.bg-div-2 {\n z-index: 10;\n position: absolute;\n inset: 4px;\n display: flex;\n border: double 2px rgba(255, 255, 255, 0.263);\n backdrop-filter: blur(2px);\n filter: blur(1px) brightness(1.1) saturate(50%) hue-rotate(30deg);\n border-radius: 47px;\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n padding: 16px;\n background-color: #ffffff1c;\n background-origin: content-box;\n background-clip: content-box, border-box;\n box-shadow: inset 0 0 10px #a84fd88d;\n}\n\n.bg-div-3 {\n z-index: 10;\n display: flex;\n border-left: 1px solid rgba(255, 255, 255, 0.564);\n border-right: 1px solid rgb(255, 255, 255);\n backdrop-filter: blur(40px);\n box-shadow: inset 0 0 20px rgba(246, 142, 213, 0.86);\n -webkit-backdrop-filter: blur(5px);\n border-radius: 31px;\n width: 100%;\n height: 100%;\n background-origin: border-box;\n background-clip: content-box, border-box;\n filter: brightness(140%);\n}\n.font-family {\n font-family: \"poppins \", sans-serif;\n}\n"}

light-pug-38

👁 实时预览

📝 源代码