Tạo Nút Download và Demo Cho Blogger

Hướng Dẫn Tạo Nút Demo và Dowload Cho Blogspot
Ảnh Minh Họa

CÁCH THỰC HIỆN


 Các bạn coppy đoạn CSS sau và dán trước thẻ ]]></b:skin>

.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;">
<ul class="button2">
<li><a class="demo" href="http://www.nguyenngocquidz.tk/" target="_blank">Demo Link</a></li>
<li><a class="download" href=http://www.nguyenngocquidz.tk/" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear">
</div>


Style 2



<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="http://www.nguyenngocquidz.tk/" target="_blank">Demo Link</a></li>
<li><a class="download" href=http://www.nguyenngocquidz.tk/" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear">
</div>


Lưu ý : nếu trong HTML bạn chưa có Font Awesome thì phải thêm đoạn code sau vào sau thẻ <head>


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>



Thay đường link http://www.nguyenngocquidz.tk/ thành đường link của bạn!
Share:

Không có nhận xét nào