极光按钮

复刻来源linear.app

React · Vue3按钮互动ReactVue3CSS 原生

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

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

下载 React 代码下载 Vue3 代码

下载 ZIP（含 React + Vue3）

演示预览实时时长 1x

微光扫掠渐变高光

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

AuroraButton.vue

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
62
63
64
65
66
67
68
69
70
71
72
73
<!--
  OmniMotion — 极光按钮 (Aurora Button)
  框架: Vue 3 (script setup) · 纯 CSS 版本
  用法: <AuroraButton variant="solid" size="md">立即开始</AuroraButton>
-->
<template>
  <button
    type="button"
    class="mk-aurora"
    :class="[`mk-aurora--${variant}`, `mk-aurora--${size}`]"
    :aria-busy="loading || undefined"
    :disabled="loading || disabled"
    @click="$emit('click', $event)"
  >
    <span class="mk-aurora__glow" aria-hidden="true" />
    <span class="mk-aurora__label">
      <slot>{{ loading ? '处理中…' : '' }}</slot>
    </span>
  </button>
</template>

<script setup>
defineProps({
  variant: { type: String, default: 'solid' },
  size: { type: String, default: 'md' },
  loading: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
})
defineEmits(['click'])
</script>

<style scoped>
.mk-aurora {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
}
.mk-aurora--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.mk-aurora--md { height: 44px; padding: 0 20px; font-size: 15px; }
.mk-aurora--lg { height: 52px; padding: 0 24px; font-size: 16px; }
.mk-aurora--solid { background: var(--mk-primary); color: var(--mk-primary-foreground); }
.mk-aurora--outline {
  background: transparent;
  color: var(--mk-primary);
  border: 1px solid var(--mk-primary-quiet);
}
.mk-aurora__label { position: relative; z-index: 1; }
.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;
}
@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; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-aurora__glow { animation: none !important; }
}
</style>

属性 · Props

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