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

效果图

相关推荐
IT_陈寒20 小时前
Redis 性能翻倍的 5 个隐藏技巧,99% 的开发者都不知道第3点!
前端·人工智能·后端
街尾杂货店&20 小时前
css word属性
前端·css
fruge1 天前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
lijun_xiao20091 天前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔1 天前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼1 天前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔1 天前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔1 天前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀1 天前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP1 天前
Ajax 详解
java·前端·ajax·javaweb