Chào các bạn, trang web của bạn là trang web chia sẻ thủ thuật, phần mềm,... thì một số button (nút) để dẫn các đường link download hay demo cũng khá cần thiết. Có lẽ không cần nói nhiều, từ tiêu đề đã rõ. Bài viết hôm nay mình sẽ chia sẻ các bạn mẫu button tuyệt đẹp được thiết kế từ CSS khá đẹp mắt. Xem demo trước nhé, nếu thấy ưng ý thì áp dụng ngay luôn!

XEM DEMO
Bước 1. Đăng nhập Blogger ➔ Mẫu ➔ Chỉnh sửa HTML.
Bước 2: Chèn đoạn CSS sau vào trước thẻ ]]></b:skin> trong template.
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
Bước 3: Lưu mẫu.

Cách sử dụng

Khi đăng bài, bạn bấm qua thẻ HTML và dùng đoạn code sau:
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="http://bacsiwindows.com/demo" target="_blank">DEMO</a></li>
<li><a class="download" href=" http://bacsiwindows.com/download" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
Với vài bước đơn giản, bạn đã có thể tạo cho mình một mẫu button tuyệt đẹp bằng CSS rồi, xem thêm các mẫu khác tại đây nhé.
                                                                                                                                                       Nguồn: Bacsiwindows.com

- 2 bình luận lượt xem

TỪ KHÓA :
http://www.plusthuthuat.com/2017/07/tao-button-demo-va-download-tuyet-ep.html

BÌNH LUẬN (2)

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 (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé