CSS Nút Demo và Download với Hiệu ứng Trượt cho Blogger ~ Iris Tips

CSS Demo and Download Button with Slide effect

Thủ thuật sau đây sẽ giúp tạo ra nút Demo và Download cho blog với hiệu ứng trượt đẹp mắt.

CSS

Thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

#wrap{margin:20px auto;text-align:center}
#wrap br{display:none}
.btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s}
.btn-slide2{border:2px solid #efa666}
.btn-slide:hover{background-color:#0099cc}
.btn-slide2:hover{background-color:#efa666}
.btn-slide:hover span.circle,.btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
.btn-slide2:hover span.circle2{color:#efa666}
.btn-slide:hover span.title,.btn-slide2:hover span.title2{left:40px;opacity:0}
.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;left:40px}
.btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}
.btn-slide2 span.circle2{background-color:#efa666}
.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2 span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}
.btn-slide2 span.title2,.btn-slide2 span.title-hover2{color:#efa666;left:80px}
.btn-slide span.title-hover,.btn-slide2 span.title-hover2{left:80px;opacity:0}
.btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff}

HTML

Khi viết bài bạn cần đăng theo cú pháp sau

<div id="wrap">
<a href="http://iris-tips.blogspot.com" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="http://iris-tips.blogspot.com" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>