css发光效果按钮 |css灯泡插件

首先，在HTML文件中添加一个按钮的代码：

<button class="glow-btn">点偶！</button>

然后，在CSS文件中设定按钮的样式：

.glow-btn {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
text-transform: uppercase;
position: relative;
overflow: hidden;
}

注意，在样式中添加了position: relative;和overflow: hidden;，这是为了隐藏按钮内部溢出元素和进行相对定位。下面，就是添加发光效果的核心代码了：

.glow-btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transition: all 0.5s ease-out;
z-index: -1;
}
.glow-btn:hover::before {
transform: translate(50%, 50%);
}

通过伪元素::before在按钮的上一层添加一个圆形半透明的背景，之后在鼠标悬浮时使用transform: translate(50%, 50%);让半透明背景变为一个光点扩散出去，从而实现了按钮的发光效果。

以上就是使用CSS实现发光效果按钮的方法，如果你想要让按钮更加炫酷，可以尝试添加其他动画效果。具体实现方法可以参考CSS动画相关知识。