button {
text-decoration:none;
position:relative;
border:none;
font-size:14px;
font-family:inherit;
cursor:pointer;
color:#fff;
width:9em;
height:3em;
line-height:2em;
text-align:center;
background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:300%;
border-radius:30px;
z-index:1;
}
button:hover {
animation:ani 8s linear infinite;
border:none;
}
@keyframes ani {
0% {
background-position:0%;
}
100% {
background-position:400%;
}
}button:before {
content:"";
position:absolute;
top:-5px;
left:-5px;
right:-5px;
bottom:-5px;
z-index:-1;
background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
border-radius:35px;
transition:1s;
}
button:hover::before {
filter:blur(20px);
}
button:active {
background:linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
}
更新时间:2024-07-31 14:50:22
这个是纯css所作出的效果动画样式