前端实现一个带流光特效的按钮

以下是一个简单的用CSS和JavaScript实现流光特效的按钮：

HTML代码：

<button class="shine-btn">按钮</button>

CSS代码：

.shine-btn {
  display: inline-block;
  border: none;
  background-color: #4CAF50;
  color: #fff;
  font-size: 16px;
  padding: 12px 24px;
  position: relative;
  overflow: hidden;
}

.shine-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: rotate(45deg);
  z-index: 2;
  animation: shine 2s linear infinite;
}

.shine-btn::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -120%;
  width: 300%;
  height: 300%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: rotate(45deg);
  z-index: 1;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  0% {
    transform: rotate(45deg) translate(-200%, -200%);
  }
  100% {
    transform: rotate(45deg) translate(200%, 200%);
  }
}

JavaScript代码：

const btn = document.querySelector('.shine-btn');

btn.addEventListener('click', () => {
  // 按钮点击后触发的事件
});

这个按钮有一个白色的流光特效，在点击时可以触发自定义的事件。可以根据具体需求进行修改。