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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
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!
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é.
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

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.
● 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.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.