Nếu bạn có trang blogspot thường xuyên phải chia sẻ link tải thì việc tạo 1 button download là khá quan trọng. Button download tạo sự nổi bật góp phần thu hút sự chú ý của người đọc.
Bài viết này sẽ chia sẻ 1 button download sử dụng hiệu ứng css3 và hoàn toàn không có javascript làm chậm tốc độ trang web của bạn.
Các bạn xem demo nút download tại đây:
Trước tiên đăng nhập vào trang quản trị và dán toàn bộ đoạn code sau vào trước thẻ ]]></b:skin>
.buttondownload3,.buttondownload3:hover{color:#fff!important}.buttonDownload3{display:inline-block;position:relative;padding:13px 20px 13px 25px;background:#2187e7;font-family:times;text-decoration:none;font-size:16px;font-weight:600;text-align:center;text-indent:15px;border-radius:5px}.buttonDownload3:hover{opacity:.9}.buttonDownload3:before,.buttonDownload3:after{content:' ';display:block;position:absolute;left:15px;top:52%}.buttonDownload3:before{width:10px;height:2px;border-style:solid;border-width:0 2px 2px}.buttonDownload3:after{margin-left:1px;margin-top:-7px;border-style:solid;border-width:4px 4px 0;border-color:transparent;border-top-color:inherit;animation:downloadArrow .7s linear infinite;animation-play-state:paused}.buttonDownload3:hover:before{border-color:#fff}.buttonDownload3:hover:after{border-top-color:#fff;animation-play-state:running}@keyframes downloadArrow{0%{margin-top:-7px;opacity:1}0.001%{margin-top:-15px;opacity:0}50%{opacity:1}100%{margin-top:0;opacity:0}}
Khi viết bài muốn sử dụng button này bạn chỉ cần chuyển chế độ HTML và dán đoạn HTML này vào
<center><a href="#" class="buttonDownload3" title="Click Here">DOWNLOAD</a></center>
Thay link tải vào vị trí #
Rất đơn giản đúng không, chúc bạn thành công!
Post a Comment
Post a Comment