Code Tạo Nút Demo Download Đẹp Cho Blogger - Blogspot Nên Dùng

Bài Hướng Dẫn Code Tạo Nút Demo Download Đẹp Cho Blogger - Blogspot

Hướng Dẫn Các Bạn Tạo Nút Demo Download đẹp để làm công việc chia sẻ template blogspot hay wordpress chẳng hạn. Bạn sẽ dán đường link của mình phía sau nó để tăng thêm vẽ đẹp thẩm mĩ cho website của bạn, được cảm giác dễ chịu cho người dùng.

Bước 1: Đầu tiên các bạn copy đoạn mã css bên dưới dán vào trước mục ]]></b:skin>

 #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;

}

Thế là đã xong bước css cho mục demo download.

Bước 2: Các bạn tiếp tục vào bài viết các bạn cần đặt mục demo download - vào phần html - và copy đoạn mã bên dưới dán vào thôi.

<div id="wrap">
<a class="btn-slide" href="#" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="btn-slide2" href="#" 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>

Chú ý: # ở đây là link các bạn điền vào nhé 

Chúc Các Bạn Thành Công

Thành Quả Của Chúng Ta

Demo Click here Download Click here

Video Hướng Dẫn Tạo Nút Demo Download Cho Bạn Nào Muốn Làm Theo