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.
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://xemgi.tk" target="_blank">Demo</a></li>
<li><a class="download" href="http://xemgi.tk" 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://xemgi.tk" target="_blank">Demo Link</a></li>
<li><a class="download" href=http://xemgi.tk" 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'/>
Bình luận Blogger
● Comment có văn hóa: Không chửi tục, nói bậy, thông qua khung Comment.
● Với tên "ẩn danh" thì bạn tích vào ô: "chứng minh bạn không phải là rô-bốt".
● Để bình luận một đoạn code, bạn click vào đây để mã hóa code trước nhé !
● Để đăng ảnh làm hình minh họa, bạn click vào đây để Upload ảnh lên sever nhé !
0 nhận xét | Viết lời bình