This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Friday, 22 September 2017

[Blogger] Tạo button download bằng CSS3 cho blogspot


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

Xem demo tại đây
 DEMO

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:3px;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

<a href="#" class="buttonDownload3" title="Click Here">DOWNLOAD</a>

Thay link tải vào vị trí #

Rất đơn giản đúng không, chúc bạn thành công
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Trần Nghĩa Phương 9/22/2017 08:50:00 PM
    :v
    Please wait while i am loading Facebook SDK js