[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 Click here

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>

Copy

.buttondownload3 a,
.buttondownload3 a: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

Copy

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

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

Rất đơn giản đúng không, chúc bạn thành công