console
<div class="autobtn">
<a href="javascript:;">
渐变按钮
</a>
</div>
<div class="autobtn2">
<a href="javascript:;">
渐变按钮
</a>
</div>
body {
text-align: center;
}
.autobtn a {
width: 307px;
height: 50px;
margin: 50px auto;
font-size: 1.2em;
color: #fff;
line-height: 50px;
text-align: center;
text-decoration: none;
border-radius: 25px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
overflow: hidden;
background-image: -webkit-linear-gradient(0deg, #e71633, #2a4dfb, #e71633);
background-size: 200% 100%;
background-position: -100% 0;
display: block;
transition: background .5s;
}
.autobtn a:hover {
background-position: 0 0;
}
.autobtn2 a {
width: 307px;
height: 50px;
margin: 50px auto;
font-size: 1.2em;
color: #fff;
line-height: 50px;
text-align: center;
text-decoration: none;
border-radius: 25px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
overflow: hidden;
background-image: -webkit-linear-gradient(60deg, #2a4dfb 80%, #002af9 83%, #05176f 86%);
background-size: 100% 100%;
background-position: 0 0;
display: block;
transition: all .5s;
}
.autobtn2 a:hover {
background-image: -webkit-linear-gradient(0deg, #2a4dfb 40%, #002af9 60%, #05176f 80%);
background-position: 100% 0;
background-size: 200% 100%;
}