[Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger

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> và 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.

Nguồn Terocket

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..