Tạo button Download chuyên nghiệp chỉ bằng CSS3

Mấy hôm trước đây mình đã có chia sẻ cho các bạn một Button có đếm số. Hôm nay tiếp tục mang đến cho các bạn một button Download chuyên nghiệp chỉ bằng CSS3 hết sức xịn xò, chất lượng nhé.

Tạo button Download chuyên nghiệp chỉ bằng CSS3.

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:

(getButton) #text=(Live Demo) #icon=(link)

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}}

Có thể có một vài lệch lạc nhỏ ở CSS, các bạn điều chỉnh lại cho hợp lý theo từng bố cục template các bạn đang sử dụng là được.

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, bài cũ úp lại cho phong phú nội dung mới nhé. Cảm ơn các bạn đã xem!