{"html":"

\n \n \n \n \n \n \n \n

Start

\n\n","css":".btn-wrapper {\n --rad: 32px;\n --color-wrapper-border: #fff;\n --color-btn-bg: #f00;\n --color-btn-text: #000;\n --color-btn-text-shadow: #fff;\n --color-btn-inset-shadow: #558;\n --color-layer-a: #fff;\n --color-layer-b: #00f;\n --color-overlay-text: #000;\n --color-overlay-glow: #fff;\n --color-overlay-shadow: #0004;\n --color-overlay-highlight: #fff5;\n\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: clip;\n overflow-clip-margin: 4px;\n\n border: 2px solid var(--color-wrapper-border);\n border-radius: var(--rad);\n\n font-family: \"Inter\", sans-serif;\n font-size: 1.5rem;\n font-weight: 600;\n\n filter: saturate(0.65) brightness(1.8);\n}\n\n.gradient-btn {\n position: relative;\n z-index: -1;\n\n padding: 12px 36px;\n border: none;\n border-radius: var(--rad);\n\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n letter-spacing: 0.15rem;\n\n color: var(--color-btn-text);\n background-color: var(--color-btn-bg);\n background-size: 200% 200%;\n box-shadow: inset 0 0 10px 9px var(--color-btn-inset-shadow);\n text-shadow: 0 1px 3px var(--color-btn-text-shadow);\n\n cursor: pointer;\n mix-blend-mode: color-dodge;\n transition:\n color 0.3s ease,\n text-shadow 0.3s ease;\n}\n\n.gradient-btn::after {\n content: \"\";\n position: absolute;\n pointer-events: none;\n\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n\n border-radius: var(--rad);\n background-size: 200% 200%;\n mix-blend-mode: difference;\n z-index: 1;\n}\n\n.gradient-layer {\n position: absolute;\n pointer-events: none;\n\n left: -160px;\n width: 500%;\n aspect-ratio: 1;\n\n background: radial-gradient(\n ellipse at 65% 180%,\n var(--color-layer-a),\n var(--color-layer-b),\n var(--color-layer-a),\n var(--color-layer-b),\n var(--color-layer-a),\n var(--color-layer-b),\n var(--color-layer-a),\n var(--color-layer-b),\n var(--color-layer-a),\n var(--color-layer-b),\n var(--color-layer-a)\n );\n\n mix-blend-mode: difference;\n animation: rotate 8s linear infinite;\n}\n\n.gradient-layer:last-child {\n mix-blend-mode: color-dodge;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.text-overlay {\n position: absolute;\n pointer-events: none;\n z-index: 2;\n\n padding: 12px 36px;\n border-radius: var(--rad);\n\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n letter-spacing: 0.15rem;\n\n color: var(--color-overlay-text);\n text-shadow: 0 0 4px var(--color-overlay-glow);\n box-shadow:\n inset 0 -4px 4px 0 var(--color-overlay-shadow),\n inset 0 4px 4px 0 var(--color-overlay-highlight);\n\n mix-blend-mode: multiply;\n transition: transform 0.3s ease;\n animation: opacityPulse 5s ease infinite;\n}\n\n.btn-wrapper:hover {\n .text-overlay {\n transform: scale(1.1);\n }\n\n .gradient-btn {\n color: #0000;\n text-shadow: 0 0 0 #0000;\n }\n}\n\n.btn-wrapper:active {\n .text-overlay {\n transform: scale(0.95);\n }\n\n .gradient-btn {\n color: #0000;\n text-shadow: 0 0 0 #0000;\n }\n}\n\n.light {\n position: absolute;\n\n pointer-events: none;\n z-index: 1;\n border-radius: 50px;\n width: 80%;\n height: 1.9rem;\n aspect-ratio: 1;\n background-color: #fff5;\n filter: blur(5px);\n animation: pulse 3s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.1;\n }\n}\n\n@keyframes opacityPulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n"}

breezy-zebra-94

👁 实时预览

📝 源代码