微光按钮 | SnippetUI

它是一个漂亮的按钮组件，通过悬停时周期性流动的光带（闪光效果）吸引眼球。非常适合您想要吸引用户注意力的 CTA（号召性用语）。

预览

用例和功能

提高转化率：视觉运动可以轻松吸引用户的注意力，非常适合注册和购买按钮等重要的号召性用语 (CTA)。
小动画：具有规则的周期性闪烁（光反射）效果，给人一种复杂的印象，但不太华丽。
微交互：悬停时按钮将稍微抬起，并添加阴影以强调它是可点击的元素。

设计和用户体验（Design & UX）的要点

对比度和可见度：通过在黑暗背景上运行明亮的光带来强调效果。
性能：利用“变换”和“不透明度”的动画可最大限度地减少浏览器上的绘图负载并实现平滑的移动。
辅助功能：对焦环（focus:ring）已适当设置，以便即使通过键盘操作也可以直观地传达状态。

如何定制（定制指南）

更改颜色：您可以通过将“rgba(255, 255, 255, 0.2)”更改为您的品牌颜色（例如“rgba(59, 130, 246, 0.3)”）来自定义灯光的颜色。
动画速度调整：将“animation: shimmer-effect 3sInfini;”的“3s”设置为“2s”会使其移动得更快，设置“5s”会使其移动得更慢。
仅使用Tailwind实现：通过在tailwind.config.js中添加keyframes，可以仅使用Tailwind的实用类来完成实现，而无需使用自定义类。

实现代码（Implementation）

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

React（Tailwind 配置）

这种方法可以通过扩展 Tailwind 配置文件（tailwind.config.js）在 React 组件中完成。