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

【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>

效果图

相关推荐
万少4 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder6 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix16 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句17 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易17 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟24 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子31 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端1 小时前
发布一个monaco-editor 汉化包
前端·npm·vite