HTML炫彩按钮,炫彩流光按钮 html+css

最新推荐文章于 2025-04-25 09:05:18 发布

吴玄熙

最新推荐文章于 2025-04-25 09:05:18 发布

阅读量1k

点赞数 1

文章标签： HTML炫彩按钮

本文详细介绍了如何使用基础CSS创建一个带有流光动画和光晕效果的按钮，通过`linear-gradient`实现颜色渐变，配合`:hover`伪类和关键帧动画，让你的按钮设计更具视觉冲击力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多，先上效果：

简介：

用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。

具体步骤：

1.先定义一个盒子当做按钮，如我就用a标签：

button

2.先给a标签写基础的样式，比如长宽等等…：

.guang{

position: relative;

display: inline-block;

width: 220px;

height: 80px;

color: rgb(255, 255, 255);

line-height: 80px;

font-size: 35px;

font-family: sans-serif;

text-decoration: none;

text-transform: uppercase;

text-align: center;

border-radius: 30px;

background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));

background-size: 400%;

z-index: 1;

text-shadow: 0 0 5px white,

0 0 5px white;

}

注意：其中一些属性用处：

text-transform: uppercase; 全部换成大写字母。

background: linear-gradient(…); 线性颜色渐变，可以改成自己要的颜色。

text-shadow: 0 0 5px white,

0 0 5px white;

写两行是为了让字体更亮。

3.鼠标经过盒子产生流光的动画：

.guang:hover{

animation: move 5s linear alternate infinite;

}

@keyframes move{

0%{

background-position: 0%;

}

100%{

background-position: 100%;

}

4.定义盒子周围的光晕阴影：

.guang::before{

content: '';

position: absolute;

top: -10px;

left: -10px;

width: 240px;

height: 100px;

background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));

background-size: 400%;

opacity: 0;

z-index: -1;

border-radius: 45px;

transition: 0.6s;

}

.guang:hover::before{

filter: blur(15px);

opacity: 1;

animation: move 8s linear alternate infinite;

}

注意：其中一些属性用处：

filter: blur 滤镜，就是让其模糊

完整代码：

Document

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background-color: black;

}

.guang{

position: relative;

display: inline-block;

width: 220px;

height: 80px;

color: rgb(255, 255, 255);

line-height: 80px;

font-size: 35px;

font-family: sans-serif;

text-decoration: none;

text-transform: uppercase;

text-align: center;

border-radius: 30px;

background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));

background-size: 400%;

z-index: 1;

text-shadow: 0 0 5px white,

0 0 5px white;

}

.guang:hover{

animation: move 5s linear alternate infinite;

}

@keyframes move{

0%{

background-position: 0%;

}

100%{

background-position: 100%;

}

.guang::before{

content: '';

position: absolute;

top: -10px;

left: -10px;

width: 240px;

height: 100px;

background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));

background-size: 400%;

opacity: 0;

z-index: -1;

border-radius: 45px;

transition: 0.6s;

}

.guang:hover::before{

filter: blur(15px);

opacity: 1;

animation: move 8s linear alternate infinite;

}

button

总结

哈哈~