@fxshelf/button-kit
Version:
Animated button shelf for React and Vue — switch styles by variant string. Zero animation-lib deps. Copy-as-source friendly.
1 lines • 12.1 kB
Source Map (JSON)
{"version":3,"sources":["../src/core/styles.css"],"sourcesContent":[".fx-btn {\n --fx-btn-fg: #0f0f12;\n --fx-btn-bg: #f4f4f5;\n --fx-btn-accent: #3b82f6;\n --fx-btn-radius: 10px;\n\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.7rem 1.25rem;\n border: 1px solid transparent;\n border-radius: var(--fx-btn-radius);\n background: var(--fx-btn-bg);\n color: var(--fx-btn-fg);\n font: inherit;\n font-size: 0.9375rem;\n font-weight: 600;\n line-height: 1.2;\n letter-spacing: 0.01em;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n isolation: isolate;\n overflow: hidden;\n transition:\n transform 160ms ease,\n box-shadow 200ms ease,\n background-color 200ms ease,\n border-color 200ms ease,\n color 200ms ease;\n}\n\n.fx-btn:focus-visible {\n outline: 2px solid var(--fx-btn-accent);\n outline-offset: 3px;\n}\n\n.fx-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.fx-btn:active:not(:disabled) {\n transform: translateY(1px) scale(0.98);\n}\n\n/* —— solid —— */\n.fx-btn--solid {\n --fx-btn-fg: #fafafa;\n --fx-btn-bg: #18181b;\n box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;\n}\n\n.fx-btn--solid:hover:not(:disabled) {\n background: #27272a;\n}\n\n/* —— outline —— */\n.fx-btn--outline {\n --fx-btn-fg: #18181b;\n --fx-btn-bg: transparent;\n border-color: #d4d4d8;\n background: transparent;\n}\n\n.fx-btn--outline:hover:not(:disabled) {\n border-color: #18181b;\n background: #18181b;\n color: #fafafa;\n}\n\n/* —— soft —— */\n.fx-btn--soft {\n --fx-btn-fg: #1d4ed8;\n --fx-btn-bg: #dbeafe;\n}\n\n.fx-btn--soft:hover:not(:disabled) {\n background: #bfdbfe;\n transform: translateY(-1px);\n}\n\n.fx-btn--soft:active:not(:disabled) {\n transform: translateY(0) scale(0.98);\n}\n\n/* —— glow —— */\n.fx-btn--glow {\n --fx-btn-fg: #f8fafc;\n --fx-btn-bg: #2563eb;\n box-shadow:\n 0 0 0 0 rgba(37, 99, 235, 0.45),\n 0 8px 24px rgba(37, 99, 235, 0.28);\n animation: fx-btn-glow-pulse 2.4s ease-in-out infinite;\n}\n\n.fx-btn--glow:hover:not(:disabled) {\n background: #1d4ed8;\n box-shadow:\n 0 0 0 6px rgba(37, 99, 235, 0.18),\n 0 10px 28px rgba(37, 99, 235, 0.4);\n animation: none;\n}\n\n@keyframes fx-btn-glow-pulse {\n 0%,\n 100% {\n box-shadow:\n 0 0 0 0 rgba(37, 99, 235, 0.4),\n 0 8px 24px rgba(37, 99, 235, 0.28);\n }\n 50% {\n box-shadow:\n 0 0 0 8px rgba(37, 99, 235, 0),\n 0 10px 28px rgba(37, 99, 235, 0.35);\n }\n}\n\n/* —— neon —— */\n.fx-btn--neon {\n --fx-btn-fg: #67e8f9;\n --fx-btn-bg: #0b1220;\n border-color: #22d3ee;\n box-shadow:\n 0 0 0 1px rgba(34, 211, 238, 0.25),\n 0 0 18px rgba(34, 211, 238, 0.35),\n inset 0 0 12px rgba(34, 211, 238, 0.08);\n text-shadow: 0 0 10px rgba(103, 232, 249, 0.55);\n}\n\n.fx-btn--neon:hover:not(:disabled) {\n color: #ecfeff;\n border-color: #67e8f9;\n box-shadow:\n 0 0 0 1px rgba(103, 232, 249, 0.45),\n 0 0 28px rgba(34, 211, 238, 0.55),\n inset 0 0 16px rgba(34, 211, 238, 0.14);\n}\n\n/* —— shimmer —— */\n.fx-btn--shimmer {\n --fx-btn-fg: #fafafa;\n --fx-btn-bg: #111827;\n}\n\n.fx-btn--shimmer::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n background: linear-gradient(\n 110deg,\n transparent 30%,\n rgba(255, 255, 255, 0.28) 48%,\n transparent 66%\n );\n transform: translateX(-120%);\n transition: transform 0.55s ease;\n}\n\n.fx-btn--shimmer:hover:not(:disabled)::before {\n transform: translateX(120%);\n}\n\n.fx-btn--shimmer:hover:not(:disabled) {\n background: #1f2937;\n}\n\n/* —— chroma（炫彩流光 + hover 高斯光晕） —— */\n.fx-btn--chroma {\n --fx-btn-fg: #fff;\n --fx-btn-radius: 999px;\n z-index: 0;\n overflow: visible;\n isolation: auto;\n border: none;\n background: linear-gradient(\n to right,\n #03a9f4,\n #f441a5,\n #ffeb3b,\n #03a9f4\n );\n background-size: 400%;\n letter-spacing: 0.08em;\n animation: fx-btn-chroma-shift 8s ease infinite;\n}\n\n.fx-btn--chroma::before {\n content: '';\n position: absolute;\n inset: -4px;\n z-index: -1;\n border-radius: inherit;\n background: linear-gradient(\n to right,\n #03a9f4,\n #f441a5,\n #ffeb3b,\n #03a9f4\n );\n background-size: 400%;\n filter: blur(0);\n opacity: 0;\n pointer-events: none;\n transition:\n opacity 0.4s ease,\n filter 0.4s ease;\n animation: fx-btn-chroma-shift 8s ease infinite;\n}\n\n.fx-btn--chroma:hover:not(:disabled)::before {\n opacity: 1;\n filter: blur(8px);\n}\n\n.fx-btn--chroma:active:not(:disabled) {\n transform: translateY(1px) scale(0.98);\n}\n\n@keyframes fx-btn-chroma-shift {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n\n/* —— liquid（底部液体升起） —— */\n.fx-btn--liquid {\n --fx-btn-fg: #0891b2;\n --fx-btn-bg: transparent;\n z-index: 0;\n border-color: #0891b2;\n background: transparent;\n overflow: hidden;\n}\n\n.fx-btn--liquid::before {\n content: '';\n position: absolute;\n left: -30%;\n bottom: 0;\n z-index: -1;\n width: 160%;\n height: 220%;\n border-radius: 42% 48% 0 0 / 28% 32% 0 0;\n background: linear-gradient(180deg, #22d3ee, #0891b2);\n transform: translateY(82%);\n transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.fx-btn--liquid:hover:not(:disabled) {\n color: #fff;\n}\n\n.fx-btn--liquid:hover:not(:disabled)::before {\n transform: translateY(12%);\n animation: fx-btn-liquid-wave 2.4s ease-in-out infinite 0.55s;\n}\n\n@keyframes fx-btn-liquid-wave {\n 0%,\n 100% {\n border-radius: 42% 48% 0 0 / 28% 32% 0 0;\n }\n\n 50% {\n border-radius: 48% 42% 0 0 / 34% 26% 0 0;\n }\n}\n\n/* —— wipe（左向右擦除填充） —— */\n.fx-btn--wipe {\n --fx-btn-fg: #f4f4f5;\n --fx-btn-bg: transparent;\n z-index: 0;\n border-color: rgba(244, 244, 245, 0.7);\n background: transparent;\n overflow: hidden;\n}\n\n.fx-btn--wipe::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n background: #f4f4f5;\n transform: translateX(-105%) skewX(-12deg);\n transform-origin: left center;\n transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.fx-btn--wipe:hover:not(:disabled) {\n color: #18181b;\n border-color: #f4f4f5;\n}\n\n.fx-btn--wipe:hover:not(:disabled)::before {\n transform: translateX(0) skewX(0deg);\n}\n\n/* —— glass（毛玻璃） —— */\n.fx-btn--glass {\n --fx-btn-fg: #f8fafc;\n --fx-btn-bg: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.28);\n background: rgba(255, 255, 255, 0.1);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.22),\n 0 8px 24px rgba(0, 0, 0, 0.18);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n}\n\n.fx-btn--glass:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.18);\n border-color: rgba(255, 255, 255, 0.4);\n transform: translateY(-1px);\n}\n\n.fx-btn--glass:active:not(:disabled) {\n transform: translateY(0) scale(0.98);\n}\n"],"mappings":"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","names":[]}