Có gì mới trên Bác Sĩ Windows?

Cập nhật những thay đổi, cập nhật mới trên Bác Sĩ Windows

TOP Bình Luận

Xếp hạng những người bình luận hàng đầu trên Bác Sĩ Windows

Dịch Vụ Blogspot

Nhận sửa lỗi blogspot giá rẻ 10K một lỗi. Liên hệ ngay

Tri Ân Độc Giả

Tặng theme blogspot Bác Sĩ Windows V.0.99 thiết kế bởi Bác Sĩ Windows

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.
Kết quả hình ảnh cho tạo nút demo download
Xem demo

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;">
<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>
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'/>
arlinadzgn.com

Bài Viết Liên Quan

10 nhận xét:

  1. Trả lời
    1. Lỗi ảnh gì vậy bạn!?

      Xóa
    2. Đi đâu cũng thấy bác :v

      Xóa
    3. Ông í siêng đi comment dạo lắm =))

      Xóa
  2. What bác ơi nó ra kiểu khác hehe
    Demo:http://www.viruserblog.tk/2017/08/psd-anh-bia-share-psd-anh-bia-sinh-ra-e.html

    Trả lờiXóa
  3. BSW bieets sửa lỗi này không ????
    http://sv1.upsieutoc.com/2017/08/03/Capture8a6f8.png
    Nó không trùng nhau @@
    Demo: https://kieugiahuy-it.blogspot.com/

    Trả lờiXóa
  4. BSW @@@@@@@@@@@ Biếu sửa cái này không ???
    https://aaaaaaaaaaaaaaaaaaasaaaa.blogspot.com/
    nó kh cân = nhau @ @

    Trả lờiXóa

Một số lưu ý khi bình luận
● Hướng dẫn viết chữ Đậm: <b>Text</b>
● Hướng dẫn viết chữ Nghiêng: <i>Text</i>
● 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.