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.
XEM DEMO
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 style="text-align: center;">Style 2
<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 class="clear">
</div>
<div style="text-align: center;">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ẻ
<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>
<head> trong template nhé.<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
bacsiwindows.com
Tags:
Thủ Thuật Blogspot
