欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的html、css语法打造创意有趣的作品，为网站加入更多高级创意的元素。
css
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.icon button{
position: relative;
display: inline-block;
border: none;
width: 200px;
height: 60px;
background-color: skyblue;
color: #fff;
line-height: 60px;
text-align: center;
text-decoration: none;
background: linear-gradient(90deg,
#03a9f4,
#f441a5,
#ffeb3b,
#03a9f4);
background-size: 400%;
border-radius: 10px;
}
@keyframes animate {
0%{
background-position: 0 0;
}
100%{
background-position: 400% 0;
}
}
.icon button{
animation: animate 8s linear infinite;
}
/* //添加光影 */
.icon button:before{
content: '';
position: absolute;
left: -5px;
top: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg,
#03a9f4,
#f441a5,
#ffeb3b,
#03a9f4);
background-size: 400%;
border-radius: 10px;
opacity: 0;
transition: all 1s;
}
.icon button:hover:before{
filter: blur(20px);
opacity: 1;
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="流光按钮.css">
</head>
<body>
<div class="icon">
<button href="#">Button</button>
</div>
</body>
</html>
