Tạo Button Download đẹp từ CSS3 cho blogger

Thủ thuật này sẽ giúp bạn tạo một nút download đẹp cho blog. Điểm đặc biệt là nó không hề sử dụng hình ảnh nào, tất cả đều được viết từ ngôn ngữ thuần CSS3 khiến cho blog của bạn tải nhanh hơn so với những nút tải về sử dụng hình ảnh. Đồng thời nó được kết hợp với hiệu ứng hiện thông tin của link liên kết khi bạn dê chuột lên nút tải về. Bạn có thể xem demo ở hình ảnh bên cạnh hoặc link kết bên dưới

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 dặ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.

XEM DEMO

☼ Tính khả dụng của button này:

Button này hoạt động tốt trên các trình duyệt như: FireFox 3.6 trở lên, Chrome, Safari 4+, Chrome10+, Safari5.1+, Opera 11.10+ *, IE6-9, IE10+, W3C.

Bạn có thể thấy nút hoạt động tốt trên hầu hết những trình duyệt được sử dụng phổ biến nhất hiện nay phải không. Do vậy bạn có thể tự do áp dụng mà không sợ vỡ bố cục trên các trình duyệt không tương thích nha. Giờ thì bạn có thể yên tâm để sử dụng nó rồi chứ, sau dây là các để thêm nó vào blog.

☼ Cách tạo Download Button đẹp từ CSS3 cho blogger.

»  Bước 1: Thêm đoạn CSS định dạng cho Button
1.1- Đăng nhập vào blog

1.2- Chọn mẫu (Templte) +> Tiếp tục chọn Chỉnh sửa HTML (Edit HTML).

1.3- Dán đoạn code bên dưới vào trước đoạn: ]]></b:skin> trong mẫu của bạn.

.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;
    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='#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;
    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;

}
.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 */

}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}

» Tùy chỉnh:

• margin: -40px 0 0 10px; Là vị trí của phần thông tin phía trên so với nút button màu xanh, nêu nó không bị ẩn toàn bộ bạn hãy thay đổi các giá trị số trong đó nha.
•  margin: -5px 0 0 10px !important; Là vị trí của phần thông tin phía dưới khi dê chuột vào, nếu nó không hiện thị hết thì hãy chỉnh lại nha.
• margin: -85px 0 0 10px !important; Là Phần thông tin phía trên sẽ hiện thị khi bạn dê chuột lên button, Hãy điều chỉnh để nó hiện thị theo ý của bạn nha.

1.4 Lưu mẫu của bạn lại và tiến hành bước tiếp theo nha.

» Bước 2: Sử dụng khi đăng bài viết.

2.1- Bạn tạo một bài đăng mới

2.2- Bấm chọn vào tab HTML của bài viết và dán đoạn code bên dưới vào nha.

<div class="abt-button">
  <a href="#">Download</a>
     <p class="up">click to begin</p>
  <p class="down">1.2MB .zip</p>
</div>

» Tùy chỉnh:

• Thay dấu # thành liên kết của nút download
• Chữ Download là chữ sẽ hiện thị.
• click to begin Là phần thông tin hover phía trên khi dê chuột lên nút tải về.
• 1.2MB .zip Là phần thông tin hover phía trên khi dê chuột lên nút tải về.

2.3- Giờ thì xuất bản bài đăng của bạn và trở vào bài đăng để kiểm tra xem tiện ích này hoạt động có được như ý muốn của bạn không nha.

Lưu ý (quan trọng): Sau khi thêm đoạn code trên vào bạn bấm xuất bản ngay không chuyển qua lại giữa 2 tab Viết và HTML nếu không đoạn mã XML sẽ bị lỗi và không hiện thị được. Do vậy mẹo nhỏ cho các bạn là thêm đoạn mã này sau khi bạn đã hoàn thiện nội dung bài viết nha.

Cuối cùng: Hãy để lại comment của ban ở cuối bài viết nếu bạn gặp bất cứ khó khăn nào khi áp dụng bài viết này nha. Và nếu thấy bài viết có ích hãy bấm like hoặc +1 để ủng hộ namkna nha các bạn :)

Nguồn: http://namkna.blogspot.com/2013/11/tao-button-download-ep-tu-css3-cho.html#.UtIyVfumaaI

Tweet