css 按钮边框动画效果 |css边框渐变颜色代码

/* 定义按钮样式 */
button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: 2px solid #007bff;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
/* 定义鼠标悬停时的效果 */
button:hover {
background-color: transparent;
color: #007bff;
}
/* 定义边框动画效果 */
button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
border: 2px solid #007bff;
border-radius: 5px;
opacity: 0;
transition: all 0.3s ease;
}
button:hover::before {
transform: scale(1.2);
opacity: 1;
}

代码解释：

• 定义按钮样式：包括背景颜色、字体颜色、边框、圆角等。
• 定义鼠标悬停时的效果：背景颜色和字体颜色颠倒。
• 定义边框动画效果：通过添加:before伪元素来实现。在:hover时触发，实现边框放大和透明度变化的效果。

总之，CSS按钮边框动画效果能够大大增强网页的视觉效果和用户交互性，让网页更加生动、有趣。