Tạo hiệu ứng chuyển màu liên tục cho button

Hiệu ứng chuyển màu liên tục cho button được Arlina sử dụng cho các button Demo/Download, mình thấy khá lạ nên Rip về. Demo như bên dưới (chờ một lúc nó sẽ chuyển màu):

Hướng dẫn tạo hiệu ứng chuyển màu liên tục cho button

Thêm CSS

@-webkit-keyframes Gradient {
      0% { background-position:0% 50%; }50% { background-position:100% 50%; }100% { background-position:0% 50%; }
}
@keyframes Gradient {
    0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } 
} 
.button { list-style:none; text-align:center; border:0; margin:10px 0; clear:both; text-decoration:none; }
.button li { display:inline; margin:0 3px; padding:0; list-style:none; }
.button li a.demo,.button li a.download { display:block; position:relative; vertical-align:top; height:52px; line-height:52px; padding:0 30px; font-size:16px; color:#fff; text-align:center; text-decoration:none; border-radius:3px; cursor:pointer; margin:auto; box-shadow:0 10px 20px rgba(0,0,0,0.06),0 6px 6px rgba(0,0,0,0.09); }
.button li a.demo { background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47); background-size:400% 400%; animation:Gradient 15s ease infinite; }
.button li a.download { background:linear-gradient(-45deg,#f28d47,#f28d47,#3aa4f3,#3aa4f3); margin:20px auto 0 auto; background-size:400% 400%; animation:Gradient 15s ease infinite; }
.button li a.demo:hover,.button li a.download:hover { box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09); }

HTML code

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="/" rel="nofollow noopener" target="_blank">Demo</a></li>
<li><a class="download" href="/" rel="nofollow noopener" target="_blank">Download</a></li>
</ul>
</div>