【css酷炫效果】纯CSS实现按钮流光边框
【css酷炫效果】纯CSS实现按钮流光边框。
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490501
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
clike
<!-- 结构示例 -->
<button class="glow-btn">
流光按钮
<span class="hover-effect"></span> <!-- 悬停特效层 -->
</button>css样式
clike
.glow-btn {
/* 基础样式 */
position: relative;
padding: 16px 40px;
border: none;
background: #1a1a1a;
color: #fff;
font-size: 18px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
/* 流光层 */
.glow-btn::before {
content: '';
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background: conic-gradient(
#00ccff 0deg,
#7e00ff 90deg,
#ff0040 180deg,
#00ccff 360deg
);
animation: rotate 4s linear infinite;
z-index: 0;
}
/* 遮罩层 */
.glow-btn::after {
content: '';
position: absolute;
inset: 2px; /* 留出2px边框空间 */
background: #1a1a1a;
border-radius: 6px;
z-index: 1;
}
/* 旋转动画 */
@keyframes rotate {
100% { transform: rotate(360deg); }
}
/* 悬停速度变化 */
.glow-btn:hover::before {
animation-duration: 2s;
}
/* 文字层 */
.glow-btn span {
position: relative;
z-index: 2;
}完整代码
clike
<!DOCTYPE html>
<style>
.glow-btn {
/* 基础样式 */
position: relative;
padding: 16px 40px;
border: none;
background: #1a1a1a;
color: #fff;
font-size: 18px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
/* 流光层 */
.glow-btn::before {
content: '';
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background: conic-gradient(
#00ccff 0deg,
#7e00ff 90deg,
#ff0040 180deg,
#00ccff 360deg
);
animation: rotate 4s linear infinite;
z-index: 0;
}
/* 遮罩层 */
.glow-btn::after {
content: '';
position: absolute;
inset: 2px; /* 留出2px边框空间 */
background: #f14545;
border-radius: 6px;
z-index: 1;
}
/* 旋转动画 */
@keyframes rotate {
100% { transform: rotate(360deg); }
}
/* 悬停速度变化 */
.glow-btn:hover::before {
animation-duration: 2s;
}
/* 文字层 */
.glow-btn span {
position: relative;
z-index: 2;
}
</style>
<button class="glow-btn">
<span>环形流光</span>
</button>
</html>效果图
