Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

Nút download ẩn hiện bằng CSS3 cho Blogger


Chào các bạn, ở bài viết trước mình đã chia sẻ tiện ích theo dõi qua mạng xã hội, hôm nay tại bài viết này mình tiếp tục chia sẻ với bạn nút download với hiệu ứng ẩn hiện khi rê chuột vào, khá là đẹp mà mình tìm thấy trên mạng. Bạn có thể sử dụng nó để chèn link download cho website của bạn, trông sẽ rất đẹp. Bạn có thể trải nghiệm demo phía dưới đây.



Tải về

KslZone.NET
2GB


Hướng dẫn cài đặt nút download ẩn hiện bằng CSS3

Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML. Tìm đến thẻ </body> và thêm đoạn CSS phía sau lên trên.

<style>

.dl-button {
margin: 50px auto;
width: 200px;
}

.dl-button a {
background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
color: white;
display: block;
font: 17px/50px Helvetica,Verdana,sans-serif;
height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;

/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;

/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}

.dl-button a, .dl-button p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.dl-button p {
background: #222222;
color: #FFFFFF;
display: block;
font: 12px/45px Helvetica,Verdana,sans-serif;
height: 40px;
margin: -40px 0 0 10px;
position: absolute;
text-align: center;
transition: margin 0.5s ease 0s;
width: 180px;
z-index: 1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;

}
.dl-button:hover .down {
margin: -5px 0 0 10px !important;
}
.dl-button:hover .up {
line-height: 35px !important;
margin: -85px 0 0 10px !important;
}
.dl-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

}
.dl-button:active .up {
margin: -20px 0 0 10px !important;
}
.dl-button:active .down {
margin: -70px 0 0 10px !important;
}
</style>


Lưu mẫu lại và tiếp tục.



Hướng dẫn sử dụng nút download ẩn hiện bằng CSS3

Sau khi thêm phần CSS và lưu lại mẫu ở bước trên, đơn giản việc bạn cần làm là khi đăng bài mới, hãy chuyển sang chỉnh sửa bằng HTML và đăng theo cấu trúc sau.

<div class="dl-button">
<a href="#">Tải về</a>
<p class="up">KslZone.NET</p>
<p class="down">2GB</p>
</div>


Lưu ý thay ký tự # thành đường link của bạn. Hy vọng nút download này giúp bạn có một website ngày càng đẹp hơn.


0 comments:

Post a Comment

Popular Posts