Tạo Button Demo & Download glow với CSS hover trượt tuyệt đẹp cho Blogspot | Vũ Minh Thịnh

Quản trị viên April 08, 2019 #Blogger

Mình sẽ hướng dẫn các bạn Tạo Button Demo & Download glow  với CSS hover trượt tuyệt đẹp cho Blogspot 

Chèn CSS trước ]]></b:skin>

/* button by METAL redesign THỊNH*/
.post-body .button{width:100%;padding:0!important;list-style:none;margin:10px auto!important}
.post-body .button li{display:inline-block;width:49%;line-height:normal;margin:0}
.post-body .button li a{position:relative;display:block;padding:12px 15px;margin:5px;color:#fff;text-align:center;border:0;text-transform:uppercase;font-weight:700;border-radius:99em;background-size:300% 100%;box-shadow:0 4px 15px 0 rgba(49,196,190,0.75)}
.post-body .button li a.demo{background-image:linear-gradient(to right,#eb3941,#f15e64,#e14e53,#e2373f)}
.post-body .button li a.download{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed)}.post-body .button li a.demo:hover,.post-body .button li a.download:hover,.post-body .button li a.demo:active,.post-body .button li a.download:active{background-position:100% 0;box-shadow:0 0 5px 0 rgba(49,196,190,0.5)}

Cách sử dụng:

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://vuminhthinhsite.blogspot.com" target="_blank">DEMO</a></li>
<li><a class="download" href="https://vuminhthinhsite.blogspot.com" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

1 bình luận

Chia sẻ