<!DOCTYPE html>
<html>
<head>
<style>
body {/*内容居中,背景色*/
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
a { /*水平垂直居中*/
position: relative;
display: inline-block;
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;
}
}
/*鼠标悬停展示*/
a:hover {
animation: animate 8s linear infinite;
}
a:hover:before {
filter: blur(20px);
opacity: 1;
}
/*光影盒子*/
a: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;
}
</style>
</head>
<body>
<a href="#">Button</a>
</body>
</html>
html流光按钮
最新推荐文章于 2024-08-23 06:12:23 发布