F23▸A035▸framer-motion

Shimmer Button

閃光按鈕

難度 ★★★★★標籤 button · shimmer · gradient2 min read

效果簡述

按鈕上有一道光帶從左掃到右，無限循環。簡單但有效，CTA 上一加馬上有「值得點」的感覺。

▸ 預設|斜向白光掃過

Claude Code Prompt

💬 Claude Code Prompt

參考：A035 shimmer button
技術：absolute 子層 + linear-gradient + animate x

具體行為:
- 父按鈕 relative overflow-hidden
- 文字外層 z-10
- shimmer span absolute inset-0
- background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%)
- framer animate x ['-120%', '120%']
- duration 2.4s linear infinite，repeatDelay 0.6 給「停頓感」

限制：
- 一頁 1 個 shimmer 就好
- 暗色按鈕用白光，淺色按鈕用暗光
- 別用在次要按鈕（廉價）

完整程式碼

ShimmerButton.tsx

'use client'

import { motion } from 'framer-motion'

export function ShimmerButton() {
return (
  <button className="relative overflow-hidden rounded-full bg-foreground px-6 py-3 text-background">
    <span className="relative z-10">看作品集</span>
    <motion.span
      aria-hidden
      className="pointer-events-none absolute inset-0"
      style={{
        background: 'linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%)',
      }}
      animate={{ x: ['-120%', '120%'] }}
      transition={{ duration: 2.4, ease: 'linear', repeat: Infinity, repeatDelay: 0.6 }}
    />
  </button>
)
}

何時用

✅ Hero 主 CTA
✅ Pricing 主推方案的訂閱按鈕
✅ 重要通知按鈕（限時優惠等）

何時別用

❌ 一般表單按鈕
❌ Nav menu 按鈕（會煩）
❌ 嚴肅的後台 UI

我踩過的坑

沒 overflow-hidden 光跑到外面：絕對位置子層會超出按鈕邊界。
白色 alpha 太大像故障：0.4 ~ 0.6 之間。1 直接看到方塊掃過。
沒 repeatDelay 太頻繁：閃個不停會煩。加 0.4~0.8 秒間隔。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋