[Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger
[Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger tạo cảm giác muốn click của người dùng đó nhé!

Hôm nay Terocket sẽ tiếp tục hướng dẫn các bạn các thủ thuật blog liên quan đến nút Buttons, và lần này thủ thuật sẽ nói về nút Download có tên là Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger. Ở thủ thuật này, nút download hay demo đều có thể áp dụng vào, phù hợp dành cho các trang download tài liệu hay demo nội dung.

Live Demo

Khi rê chuột vào, nó sẽ tự động giản ra các thông số thông tin về nội dung mà người dùng sẽ click vào, rất chi tiết và đầy đủ, tạo sự tin tưởng cho người dùng và gia tăng click của khách hàng trên website bạn.

Lợi thế của thủ thuật blog Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger này đó là hoàn toàn sử dụng CSS, không sử dụng một code nào liên quan đến Javascript. Và các bạn yên tâm đặt nó bên trong nội dung website mà không sợ ảnh hưởng đến trải nghiệm người dùng, đặc biệt nó hoàn toàn thân thiện với SEO. Và giờ, hãy cùng Terocket thực hiện thủ thuật blogger này nha.

Bước 1 - Cần thêm CSS vào tổng thể HTML của website bạn

Trước hết hãy vào Blog Title → Template → Edit HTML, nhấn tổ hơp Ctrl + F và tìm kiếm ]]></b:skin>. Sau đó hãy copy đoạn mã code sau vào dưới ]]></b:skin>Lưu lại nhé!

<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}
 /* Get this button at Terocket.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=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,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=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>

Bước 2 - Chèn HTML Buttons vào nội dung và vị trí mà bạn muốn nó hiển thị

Ở bước này cực kỳ đơn giản, nếu bạn muốn Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger xuất hiện ở đâu, hãy chèn đoạn mã code sau vào HTML của website ở vị trí đó. Sau đó lưu lại là xong.

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

Vậy là đã xong thủ thuật blog Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger này rồi, chúc các bạn thành công với hướng dẫn này của Terocket nha.

Dưới đây có một số thủ thuật liên quan đến nút Buttons cho website, mọi người ai quan tâm thì cùng xem nhé!

  1. [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger
  2. [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger
  3. [Tips] - Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot
  4. [Tips] - Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger
  5. [Tips] - Nút Facebook share trượt hai bên cho Blogger[Tips] - Nút buttons động bằng CSS3 cho Blogger V1
  6. [Tips] - Theo dõi qua email kết hợp mạng xã hội ở bài viết Blogger V1
  7. [Tips] - Nút Facebook share trượt hai bên cho Blogger
  8. Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng
  9. Tạo nút bấm nhảy xuống cuối trang, lên đầu trang (back to top - bottom)
  10. Tạo nút Back to Top cho blogger với JQuery
  11. Tạo social button với hiệu ứng xoay tròn trên header
  12. Nút like với hiệu ứng ẩn hiện trên sidebar cho blogspot
  13. Mã iframe nút Google +1 cho mọi blog
  14. Nút like ẩn hiện khi xem bài viết blogger
  15. Thêm nút Social bookmark cho blogger
  16. Floating Social Bookmark trượt đẹp cho blogspot
  17. Hộp like và đăng ký ở cuối bài viết cho blogger
  18. Nút Share trượt hình quả trứng cho blogspot
  19. Nút Google+1,Tweet,Like, Pin It buttons theo chiều ngang
  20. Nút Share hặc Menu quay vòng bằng CSS3 cho Blogger
  21. Tiện ích các nút Share trượt dọc cho Blogspot (sticky sidebar)
  22. Chèn nút nhúng Linkhay và Tagvn vào Blogger
  23. Facebook like button cho Blogspot

Trứng Vịt - Terocket