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

May 21, 2018 June 15, 2018
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>
Tags: #button , #gradient,
Click to show more

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

Ads Above Article

Ads Inside Article 1

Ads Inside Article 2

Ads Bellow Article