Tạo nút download cho blogspot với hiệu ứng cực đẹp

Quá trình thực hiện như sau:

Giai đoạn 1:

- Đăng nhập Blogger - Mẫu - Chỉnh Sửa HTML

- Kiểm tra xem trong template của bạn đã có đoạn code bên dưới chưa nhé , nếu chưa có các bạn copy đoạn code và dán vào trước thẻ đóng </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

- Tìm đến trước thẻ đóng ]]></b:skin hoặc </style> chèn đoạn code CSS bên dưới vào.

#wrap

{

margin: 20px auto;

text-align: center;

}

#wrap br

{

display: none;

}

.btn-slide, .btn-slide2 {

position: relative;

display: inline-block;

height: 50px;

width: 200px;

line-height: 50px;

padding: 0;

border-radius: 50px;

background: #fdfdfd;

border: 2px solid #0099cc;

margin: 10px;

transition: .5s;

}

.btn-slide2 {

border: 2px solid #efa666;

}

.btn-slide:hover {

background-color: #0099cc;

}

.btn-slide2:hover {

background-color: #efa666;

}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 

{

left: 100%;

margin-left: -45px;

background-color: #fdfdfd;

color: #0099cc;

}

.btn-slide2:hover span.circle2

{

color: #efa666;

}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 

{

left: 40px;

opacity: 0;

}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 

{

opacity: 1;

left: 40px;

}

.btn-slide span.circle, .btn-slide2 span.circle2 

{

display: block;

background-color: #0099cc;

color: #fff;

position: absolute;

float: left;

margin: 5px;

line-height: 42px;

height: 40px;

width: 40px;

top: 0;

left: 0;

transition: .5s;

border-radius: 50%;

}

.btn-slide2 span.circle2 {

background-color: #efa666;

}

.btn-slide span.title,

.btn-slide span.title-hover, .btn-slide2 span.title2,

.btn-slide2 span.title-hover2

{

position: absolute;

left: 90px;

text-align: center;

margin: 0 auto;

font-size: 16px;

font-weight: bold;

color: #30abd5;

transition: .5s;

}

.btn-slide2 span.title2,

.btn-slide2 span.title-hover2

{

color: #efa666;

left: 80px;

}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2

{

left: 80px;

opacity: 0;

}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2

{

color: #fff;

}

- Lưu Mẫu (Saves) Template Lại.

Đến đây coi như các bạn đã hoàn thành giai đoạn 1.

Giai đoạn 2:

Các bạn quay trở lại bải đăng hoặc bài viết mới, viết bài bình thường nhé, mỗi khi các bạn cần chèn đườn link để tạo nút demo hay download vào chỗ nào thì các bạn chuyển qua tab - Chỉnh Sửa HTML nhé, và dán đoạn code CSS bên dưới vào.

<div>

<a class="btn-slide2" href="https://www.hotrocongdong-ee.gq" target="_blank">

<span class="circle2"><i class="fa fa-download"></i></span>

<span class="title2">Download</span>

<span class="title-hover2">Click here</span>

</a>

</div>

Kiểm tra kết quả:

Download Click here