【css酷炫效果】纯CSS实现按钮流光边框

冰夏之夜影

已于 2025-03-17 15:40:50 修改

阅读量373

点赞数 9

分类专栏： web前端文章标签： css 前端

于 2025-03-17 14:33:13 首次发布

本文链接：https://blog.youkuaiyun.com/u011561335/article/details/146314381

版权

web前端专栏收录该内容

37 篇文章

订阅专栏

【css酷炫效果】纯CSS实现按钮流光边框

缘
创作背景
html结构
css样式
完整代码
效果图

【css酷炫效果】纯CSS实现按钮流光边框。
想直接拿走的老板，链接放在这里：https://download.youkuaiyun.com/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>