Css3 nút download đẹp và mượt cho blogger

Thủ thuật này sẽ giúp bạn tạo một nút download đẹp cho blog. Điểm nổi bật và khác biệt của nút này làcó thể hiện thông tin của link liên kết khi bạn rê chuột lên nút tải về

Thủ thuật này đặc biệt thích hợp với những blog chuyên viết về phần mềm và chia sẻ các link liên kết. Áp dụng nó sẽ khiến blog của bạn đặc biệt hơn, nó tạo cho bạn có một phong cách riêng so với các blog/web khác.

☼ Demo:

Download

Click để tải

1.2MB .zip

☼ Cách làm:

Nếu là blogspot thì bạn vào Template(Mẫu) -> Edit html(Chỉnh sửa html) rồi dán đoạn css dưới sau thẻ <head>, còn nếu là web hosting thì bạn dán thẳng code vào đâu cũng được, nhưng mình khuyên nên dán sau thẻ <head>

/*http://hackergrousrlpprsc.blogspot.com*/
.abt-button {
margin: 50px auto;
width: 200px;
}

/* Get this button at AllBloggerTricks.com */

.abt-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;

/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*http://hackergrousrlpprsc.blogspot.com*/
/*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='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.abt-button a, .abt-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);
}
.abt-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;
/*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;

}
.abt-button:hover .up {
margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
line-height: 35px !important;
margin: -85px 0 0 10px !important;
}
.abt-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='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
/*http://hackergrousrlpprsc.blogspot.com*/
}
.abt-button:active .up {
margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
margin: -70px 0 0 10px !important;
}

Nhớ chỉnh các thông số cho phù hợp nhé!

Tiếp theo dán đoạn code dưới đây vào nơi bạn muốn hiển thị nút(trong thẻ <body>)

<div class="abt-button">
<a href="https://www.facebook.com/HackerGrouSrlpPrsc">Download</a>
<p class="up">Click để tải</p>
<p class="down">1.2MB .zip</p>
</div>

https://www.facebook.com/HackerGrouSrlpPrsc: Là link chuyển tới khi click vào nút
Download: Là chữ sẽ hiển thị
Click để tải và 1.1MB.zip: : Là chữ sẽ hiển thị khi hover chuột

Chúc các bạn thành công!
Một số bài viết liên quan:
- Css nút download đẹp cho blog/web

Mã bài viết: 654rtu4rtu
Người viết: Hacker GSP