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 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}Bước 3: Lưu mẫu.
.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;}
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;">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é.
<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>
Nguồn: Bacsiwindows.com
vc k coppy đc
Trả lờiXóa- bạn click vào code là tự động bôi đen cho bạn copy nhé
Xóathank you!
Trả lờiXóahttps://sharktools.blogspot.com