帮我用HTML+CSS写出一个发光的按钮
时间: 2024-05-09 08:17:53 浏览: 8
好的,可以使用以下代码来制作一个发光的按钮:
HTML代码:
```html
<button class="glow-button">发光的按钮</button>
```
CSS代码:
```css
.glow-button {
background-color: #4CAF50; /* 背景色 */
border: none; /* 去掉按钮边框 */
color: white; /* 文字颜色 */
padding: 15px 30px; /* 按钮内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去掉下划线 */
display: inline-block;
font-size: 16px; /* 文字大小 */
margin: 4px 2px; /* 按钮边距 */
cursor: pointer; /* 鼠标样式 */
position: relative; /* 让伪元素定位 */
}
.glow-button::before,
.glow-button::after {
content: "";
background: #4CAF50;
position: absolute;
width: 0%;
height: 100%;
top: 0;
left: 0;
opacity: 0.5;
transition: all 0.5s;
z-index: -1;
}
.glow-button:hover::before,
.glow-button:hover::after {
width: 100%;
opacity: 1;
}
.glow-button:hover {
color: #333;
font-weight: bold;
}
```
这样就可以得到一个发光的绿色按钮了。如果需要自定义颜色,可以修改背景色和伪元素的背景色。