炫酷的按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.search-ok {
width: 200px;
height: 30px;
line-height: 30px;
background-image: linear-gradient(90deg, #03A9F4, #F441A5, #FFEB3B, #03A9F4);
background-size: 400%;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
}
.search-ok:hover {
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
</style>
</head>
<body>
<button class="search-ok">我很炫酷</button>
</body>
</html>
鼠标移上去的时候，会动态的变化颜色