南安网站设计搜索引擎营销的典型案例
【css酷炫效果】纯CSS实现按钮流光边框
- 缘
- 创作背景
- html结构
- css样式
- 完整代码
- 效果图
【css酷炫效果】纯CSS实现按钮流光边框。
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490501
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
<!-- 结构示例 -->
<button class="glow-btn">流光按钮<span class="hover-effect"></span> <!-- 悬停特效层 -->
</button>
css样式
.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;
}
完整代码
<!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>
效果图
