极光按钮

复刻来源linear.app

React · Vue3按钮互动ReactVue3CSS 原生

指针悬停时高光带扫过按钮表面，适合主行动点与结账流程。

业务项目无源码 → 我们复刻实现，自动适配 React，复制代码拿去即可使用。

下载 React 代码下载 Vue3 代码

下载 ZIP（含 React + Vue3）

演示预览实时时长 1x

微光扫掠渐变高光

播放速度已适配 prefers-reduced-motion

AuroraButton.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
 * OmniMotion — 极光按钮 / AuroraButton (React 18+ · 纯 CSS 版本)
 * 用法: <AuroraButton size="md" onClick={handleStart}>立即开始</AuroraButton>
 */
import { useEffect } from "react";

const KEYFRAMES = `
@keyframes mk-aurora-sweep {
  0%   { transform: translate3d(-120%, 0, 0) skewX(-18deg); opacity: 0; }
  18%  { opacity: 0.85; }
  100% { transform: translate3d(220%, 0, 0) skewX(-18deg); opacity: 0; }
}
.mk-aurora { position: relative; overflow: hidden; isolation: isolate; }
.mk-aurora__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.42) 50%, transparent 66%);
  transform: translate3d(-120%, 0, 0) skewX(-18deg);
}
.mk-aurora:hover .mk-aurora__glow { animation: mk-aurora-sweep 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .mk-aurora__glow { animation: none !important; } }
`;

const VARIANTS = {
  solid: { background: "var(--mk-primary)", color: "var(--mk-primary-foreground)" },
  outline: { background: "transparent", color: "var(--mk-primary)" },
};

const SIZES = {
  sm: { height: 36, fontSize: 13 },
  md: { height: 44, fontSize: 15 },
  lg: { height: 52, fontSize: 16 },
};

export default function AuroraButton({
  variant = "solid", size = "md", loading = false, disabled = false, onClick, children,
}) {
  useEffect(() => {
    if (document.getElementById("mk-aurora-css")) return;
    const tag = document.createElement("style");
    tag.id = "mk-aurora-css";
    tag.textContent = KEYFRAMES;
    document.head.appendChild(tag);
  }, []);

  const tone = VARIANTS[variant] || VARIANTS.solid;
  const box = SIZES[size] || SIZES.md;
  const inert = loading || disabled;

  return (
    <button type="button" className="mk-aurora" disabled={inert} onClick={onClick}
      aria-busy={loading || undefined}
      style={{ position: "relative", display: "inline-flex", alignItems: "center",
        justifyContent: "center", gap: 8, height: box.height, padding: "0 20px",
        fontSize: box.fontSize, fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap",
        border: "1px solid transparent", borderRadius: 8,
        cursor: inert ? "not-allowed" : "pointer", opacity: inert ? 0.55 : 1, ...tone }}>
      <span className="mk-aurora__glow" aria-hidden="true" />
      <span style={{ position: "relative", zIndex: 1 }}>{loading ? "处理中…" : children}</span>
    </button>
  );
}

属性 · Props

属性	类型	默认值	说明
variant	"solid" \| "outline"	solid	控制按钮的视觉样式
size	"sm" \| "md" \| "lg"	md	控制按钮尺寸
loading	boolean	false	展示处理中状态并禁用点击
disabled	boolean	false	禁用按钮
onClick	() => void	—	点击回调