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

Anh Trai Nắng
4

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

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

4 Nhận xét

  1. Tạo trang xác nhận chuyển hướng đi anh

    Trả lờiXóa
  2. Tên hiển thị: Huy Hoàng IT
    Link blog: https://huyhoangit-tips.blogspot.com/
    Mô tả: https://huyhoangit-tips.blogspot.com/

    Trả lờiXóa
Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu