使用 CSS 制作酷炫流光按钮

在这篇文章中，我将向你展示如何使用 HTML 和 CSS 制作一个带有流光效果的按钮。当鼠标移动到按钮上时，光晕会随着鼠标的移动而动态变化，形成流光的视觉效果。

最终效果

---

实现步骤

1. HTML 结构 我们创建了一个简单的 HTML 页面，包含三个按钮，每个按钮都使用 <a> 标签，并通过 style 属性设置不同的颜色：

<a href="#" style="--color: #0f0"><span>BUTTON</span></a>
<a href="#" style="--color: #ff0"><span>BUTTON</span></a>
<a href="#" style="--color: #f0f"><span>BUTTON</span></a>

--color 是一个 CSS 自定义属性，用于动态设置按钮的主色调。

---

2. CSS 样式 主要的流光效果是通过以下 CSS 实现的：

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* 布局样式 */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    height: 100vh;
    background-color: #222;
}

/* 按钮基础样式 */
a {
    position: relative;
    padding: 20px 60px;
    background-color: rgba(45, 45, 45, 1);
    border-radius: 50px;
    text-decoration: none;
    color: #999;
    font-size: 1.5rem;
    transition: 0.5s;
    overflow: hidden;
}

核心流光效果：

::before伪元素： 用于生成一个动态的径向渐变光晕。

a::before {
    content: '';
    position: absolute;
    top: var(--y, 0px);
    left: var(--x, 0px);
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(var(--color), transparent, transparent);
    opacity: 0;
    transition: 0.5s;
}
a:hover::before {
    opacity: 1;
}

::after伪元素： 在按钮内部添加一个半透明背景，增强光晕效果的对比。

a::after {
    content: '';
    background-color: rgba(45, 45, 45, 0.8);
    position: absolute;
    inset: 2px;
    border-radius: 48px;
}

---

3. JavaScript 动态光晕效果 我们通过监听鼠标在按钮上的移动事件，动态更新 --x 和 --y 的值：

const buttons = document.querySelectorAll('a');
buttons.forEach(button => {
    button.addEventListener('mousemove', e => {
        const x = e.clientX - e.target.offsetLeft;
        const y = e.clientY - e.target.offsetTop;

        e.target.style.setProperty('--x', `${x}px`);
        e.target.style.setProperty('--y', `${y}px`);
    });
});

---

总结

通过简单的 HTML、CSS 和少量 JavaScript，我们便可以实现一个动态流光效果的按钮。这个效果不仅美观，还能提升用户体验，非常适合在网页中使用。快来试试吧！