css按钮边缘发光 |css优势

.btn {
border: none;
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
position: relative;
}
.btn::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(255, 255, 255, 0.7);
z-index: -1;
border-radius: 5px;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.btn:hover::before {
opacity: 1;
}

通过在按钮伪类中添加 ::before 元素，然后设置位置、大小、边框属性，使其与按钮相同大小。然后利用伪类 ::before 进行过渡，使其在鼠标悬停时出现，以增强按钮的美感。