Tạo button "Demo" và "Download" tuyệt đẹp bằng CSS cho Blogspot

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 demoBướ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:'\f135';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:'\f019';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é.

msdesignbd.com