一个个人觉得比较好看的前端按钮效果

视频

代码

为防止视频失效，这里贴一下代码

/*基础设置，设置按钮原本的背景色和字体颜色*/
.button {
  color: var(text);
  background-color: var(--alt-bg);
  border-radius: 20px;
  position: relative;
  overflow: hidden;/*防止发光效果溢出*/
  border: none;
}
/*设置鼠标悬停时文字发光效果*/
.button:hover {
  color: var(--brand-bg);/*颜色切换*/
  text-shadow: 0 0 10px var(--brand-bg), 0 0 20px var(--brand-bg);/*发光效果*/
}
/*before伪元素，这个伪元素用来生成发光效果*/
.button::before {
  content: '';
  position: absolute;
  top: var(--y);/*需要用js计算*/
  left: var(--x);
  transform: translate(-50%, -50%);/*居中*/
  background: radial-gradient(var(--brand-bg), transparent, transparent);/*设定设定发光效果*/
  width: 100px;
  height: 100px;
  opacity: 0;/*默认不发光*/
  transition: .5s, top 0, left 0;
}
.button:hover::before {
  opacity: 1;/*鼠标悬停后发光*/
}
/*光线遮罩，限定发光效果在按钮边缘*/
.button::after {
  content: '';
  position: absolute;
  inset: 2px;/*inset和border-radius需要根据按钮原本的圆角大小设置*/
  border-radius: 18px;
  background-color: var(--alt-bg);
}

//注意挂载
onMounted(() => {
  const button = buttonRef.value
  if (!button) return

  const handler = (e: MouseEvent) => {
    const rect = button.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top
    button.style.setProperty('--x', `${x}px`)
    button.style.setProperty('--y', `${y}px`)
    console.log(x, y)
  }

  button.addEventListener('mousemove', handler)
  
  onUnmounted(() => {
    button.removeEventListener('mousemove', handler)
  })
})