{"html":"\n","css":".galaxy-btn {\n /* Scoped Variables */\n --btn-bg: #0c0c14;\n --btn-text: #ffffff;\n --btn-primary: #8553f4; /* Purple */\n --btn-secondary: #3b82f6; /* Blue */\n --btn-accent: #f43f5e; /* Pink */\n --btn-font-size: 16px; /* Base size */\n\n /* Layout & Sizing */\n font-family:\n system-ui,\n -apple-system,\n sans-serif;\n font-size: var(--btn-font-size);\n padding: 0.9em 2em;\n border-radius: 0.75em;\n border: none;\n background: var(--btn-bg);\n position: relative;\n cursor: pointer;\n overflow: hidden;\n z-index: 1;\n transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n\n /* Shadow */\n box-shadow: 0 0.5em 1.5em -0.5em rgba(133, 83, 244, 0.4);\n}\n\n/* Accessible Focus State */\n.galaxy-btn:focus-visible {\n outline: 2px solid var(--btn-primary);\n outline-offset: 4px;\n}\n\n/* Active Click State */\n.galaxy-btn:active {\n transform: scale(0.96);\n}\n\n/* --- Interior Content --- */\n.galaxy-btn__content {\n display: flex;\n align-items: center;\n gap: 0.75em;\n position: relative;\n z-index: 2;\n color: var(--btn-text);\n font-weight: 600;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n\n/* SVG Icon Styling */\n.galaxy-btn__icon {\n width: 1.25em;\n height: 1.25em;\n transition: transform 0.3s ease;\n fill: var(--btn-text);\n}\n\n/* Hover: Move Icon */\n.galaxy-btn:hover .galaxy-btn__icon {\n transform: translateX(0.25em) rotate(-10deg);\n}\n\n/* --- The Rotating Gradient Border (The Nebula) --- */\n.galaxy-btn::before {\n content: \"\";\n position: absolute;\n inset: -4px; /* Border width */\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n var(--btn-bg) 0deg,\n var(--btn-primary) 60deg,\n var(--btn-secondary) 120deg,\n var(--btn-bg) 180deg,\n var(--btn-accent) 240deg,\n var(--btn-primary) 300deg,\n var(--btn-bg) 360deg\n );\n border-radius: 0.75em;\n animation: rotate-nebula 4s linear infinite;\n filter: blur(8px); /* Soften for glow effect */\n opacity: 0.7;\n transition: opacity 0.3s ease;\n}\n\n.galaxy-btn:hover::before {\n opacity: 1;\n animation-duration: 2s; /* Speed up on hover */\n}\n\n/* Mask to create the inner dark area (Simulates border) */\n.galaxy-btn::after {\n content: \"\";\n position: absolute;\n inset: 2px; /* Inner spacing */\n background: var(--btn-bg);\n border-radius: 0.6em; /* Slightly smaller radius */\n z-index: 1;\n}\n\n/* --- Internal Star Animation --- */\n.galaxy-btn__stars {\n position: absolute;\n inset: 0;\n z-index: 1;\n pointer-events: none;\n background-image: radial-gradient(\n circle at 20% 30%,\n white 1px,\n transparent 1.5px\n ),\n radial-gradient(circle at 80% 70%, white 1px, transparent 1.5px),\n radial-gradient(circle at 40% 80%, white 0.5px, transparent 1px);\n background-size: 120% 120%;\n opacity: 0.3;\n transition:\n opacity 0.3s ease,\n background-position 0.3s ease;\n}\n\n.galaxy-btn:hover .galaxy-btn__stars {\n opacity: 0.8;\n animation: star-drift 5s linear infinite alternate;\n}\n\n/* --- Keyframes --- */\n@keyframes rotate-nebula {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes star-drift {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(1.1) translate(-2%, -2%);\n }\n}\n"}

tough-lionfish-7

👁 实时预览

📝 源代码