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

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

Updated on May 11, 2019
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>

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

Cancel