扫光按钮

悬停或聚焦时，一道窄窄的光带从按钮上滑过一次。

CSS
按钮
悬停
收录于 2026-10-30

AI 提示词

为 React 按钮制作纯 CSS 的扫光效果。按钮设置 position: relative 和 overflow: hidden。添加一个覆盖整个按钮的 ::after 伪元素，背景为 100 度的 linear-gradient：30% 处透明，50% 处为 45% 不透明度的白色，70% 处透明。静止时位于 transform: translateX(-120%)。在 :hover 和 :focus-visible 时，用 700ms 的 cubic-bezier(0.16, 1, 0.3, 1) 移动到 translateX(120%)；指针离开时用 transition: none 直接复位，让扫光只向前播放。只对 transform 做动画。在 prefers-reduced-motion 下隐藏扫光，悬停时改为稍亮的背景色。按钮文字为“下载素材包”。

源代码

Demo.tsx

'use client'

import s from './demo.module.css'

export default function ShineSweep({ labels }: { labels: Record<string, string> }) {
  return (
    <button type="button" className={s.button}>
      {labels.cta}
    </button>
  )
}

demo.module.css

.button {
  position: relative;
  overflow: hidden;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 12px;
  background: var(--stage-accent);
  color: var(--stage-accent-ink);
  font: 600 var(--text-base) / 1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}

.button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--stage-sheen) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

.button:hover::after,
.button:focus-visible::after {
  transform: translateX(120%);
  transition: transform 700ms var(--ease-out);
}

.button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.button:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .button::after { display: none; }
  .button:hover { background: var(--stage-accent-hover); }
}