Tạo button Demo và Download bằng CSS cực đẹp cho Blogger

#Thủ Thuật #Windows #Blogger #Facebook

Tạo button Demo và Download bằng CSS cực đẹp cho Blogger

Share:
Nếu blog của bạn là trang chia sẻ template blogger hay phần mềm máy tính, thì chắc chắn sẽ không thể thiếu những nút (hay button) để truy cập nhanh đến trang đó.
Trong bài viết này, mình sẽ hướng dẫn các bạn tạo bộ button gồm 2 nút DEMO và DOWNLOAD cực đẹp chỉ hoàn toàn bằng CSS.

Các bước thực hiện

Các bạn copy đoạn CSS sau và dán vào trước thẻ ]]></b:skin> trong template
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Cách sử dụng

Style 1
<div class="clear"><div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blogttcn.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://blogttcn.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
</div>
Style 2
<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="http://blogttcn.blogspot.com" target="_blank">Demo Link</a></li>
<li><a class="download" href=http://blogttcn.blogspot.com" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear">
</div>
Lưu ý: Nếu trong template bạn chưa có Font Awesome thì phải thêm đoạn code sau vào sau thẻ <head> trong template nhé.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.