大家好，我是大华！今天分享一个CSS流光按钮效果。这种效果在现代网站设计中非常流行，能够明细的提升用户体验和页面视觉吸引力。
先看一下最终效果
当鼠标悬停在按钮上时，按钮会上升并显示流动的彩色边框，同时内部会有高光扫过，实现了流光溢彩的视觉效果。
HTML结构
首先，我们来看HTML结构，它非常简洁明了：
html
<div class="container">
<h1>这个标题也是有效果的哦~</h1>
<p class="description">
这是一个完全使用CSS创建的流光效果...
</p>
<div class="button-container">
<a href="#" class="btn btn-primary"><span>开始体验</span></a>
<a href="#" class="btn btn-secondary"><span>了解更多</span></a>
<a href="#" class="btn btn-tertiary"><span>立即下载</span></a>
</div>
</div>CSS样式
1. 流光文字效果
css
h1 {
color: transparent;
background: linear-gradient(90deg, #ff0080, #00ffcc, #ff0080);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
margin-bottom: 30px;
font-size: 2.8rem;
animation: textShine 5s linear infinite;
}
@keyframes textShine {
0%, 100% {
background-position: 0% center;
}
50% {
background-position: 100% center;
}
}这里使用了几个关键技巧：
color: transparent让文字本身透明- 创建一个线性渐变背景，包含粉色和青蓝色
background-clip: text让背景只显示在文字区域- 通过动画改变背景位置，创造出流光效果
2. 按钮基础样式
css
.btn {
position: relative;
width: 240px;
height: 70px;
line-height: 70px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
background: rgba(20, 20, 40, 0.8);
border-radius: 12px;
z-index: 1;
transition: all 0.4s ease;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}按钮的基础样式设置了：
- 相对定位，为后面的伪元素定位做准备
- 固定的宽度和高度
- 深色半透明背景
- 圆角边框
- 阴影增加立体感
- 过渡效果，让状态变化更平滑
3. 流光边框效果（核心实现）
css
.btn::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff0080, #00ffcc, #0066ff, #ff0080);
background-size: 400% 400%;
border-radius: 14px;
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
animation: borderGlow 6s ease infinite;
}
@keyframes borderGlow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}这是实现流光边框的关键：
- 使用
::before伪元素创建边框 - 设置
top/left/right/bottom为-2px，让它比按钮本身大一点 - 创建多彩渐变背景，并设置较大的背景尺寸
- 初始状态透明度为0，悬停时变为1
- 通过动画不断改变背景位置，创造出流动效果
4. 内部高光效果
css
.btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.7s ease;
z-index: 0;
}这个效果：
- 使用
::after伪元素创建内部高光 - 初始位置在按钮左侧外部（left: -100%）
- 悬停时移动到右侧外部（left: 100%）
- 创建一个透明-半透明白色-透明的渐变，模拟高光
5. 悬停效果
css
.btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.btn:hover::before {
opacity: 1;
}
.btn:hover::after {
left: 100%;
}当鼠标悬停时：
- 按钮向上移动5像素
- 阴影变大，增强立体感
- 显示流光边框
- 触发内部高光动画
完整源码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流光按钮效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle at center, #0f1b33, #000);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
overflow-x: hidden;
}
.container {
text-align: center;
max-width: 900px;
width: 100%;
}
h1 {
color: transparent;
background: linear-gradient(90deg, #ff0080, #00ffcc, #ff0080);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
margin-bottom: 30px;
font-size: 2.8rem;
animation: textShine 5s linear infinite;
}
.description {
color: #a0aec0;
margin-bottom: 50px;
line-height: 1.6;
font-size: 1.1rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.button-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 40px;
}
/* 按钮基础样式 */
.btn {
position: relative;
width: 240px;
height: 70px;
line-height: 70px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
background: rgba(20, 20, 40, 0.8);
border-radius: 12px;
z-index: 1;
transition: all 0.4s ease;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* 流光边框效果 */
.btn::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff0080, #00ffcc, #0066ff, #ff0080);
background-size: 400% 400%;
border-radius: 14px;
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
animation: borderGlow 6s ease infinite;
}
/* 内部流光效果 */
.btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.7s ease;
z-index: 0;
}
.btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.btn:hover::before {
opacity: 1;
}
.btn:hover::after {
left: 100%;
}
.btn span {
position: relative;
z-index: 2;
}
/* 不同按钮的颜色变化 */
.btn-primary::before {
background: linear-gradient(45deg, #ff0080, #ff3399, #ff0080);
}
.btn-secondary::before {
background: linear-gradient(45deg, #00ffcc, #33ffd6, #00ffcc);
}
.btn-tertiary::before {
background: linear-gradient(45deg, #0066ff, #3399ff, #0066ff);
}
@keyframes borderGlow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes textShine {
0%, 100% {
background-position: 0% center;
}
50% {
background-position: 100% center;
}
}
</style>
</head>
<body>
<div class="container">
<h1>这个标题也是有效果的哦~</h1>
<p class="description">
这是一个完全使用CSS创建的流光效果。按钮具有动态流光边框和内部高光动画，当鼠标悬停时，按钮会上升并显示流动的光效，带来沉浸式的视觉体验。
</p>
<div class="button-container">
<a href="#" class="btn btn-primary"><span>开始体验</span></a>
<a href="#" class="btn btn-secondary"><span>了解更多</span></a>
<a href="#" class="btn btn-tertiary"><span>立即下载</span></a>
</div>
</div>
</body>
</html>总结
1. 伪元素的使用 ：::before和::after伪元素让我们可以在不添加额外HTML元素的情况下创建复杂的视觉效果。
2. CSS渐变 ：线性渐变(linear-gradient)是创建流光效果的核心，通过设置多个颜色停止点创造出丰富的色彩过渡。
3. CSS动画 ：通过@keyframes和animation属性，我们可以创建平滑的动画效果，而不需要JavaScript。
4. 背景裁剪 ：background-clip: text是一个很有用的属性，可以让背景只显示在文字区域。
5. Z-index层级管理：正确设置z-index确保各个元素按正确的顺序堆叠。
扩展思路
你可以尝试：
- 改变渐变色创建不同的主题
- 调整动画速度和方向
- 添加点击效果
本文首发于公众号：程序员刘大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！