SOURCE

console 命令行工具 X clear

                    
>
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%;
}