Thêm nút Demo và Download với hiệu ứng động cho blogspot - Download the Demo button and add animation effects to blogspot - 2015,2016

Hướng dẫn Thêm nút Demo và Download với hiệu ứng động cho blogspot.

Button Demo và Download với hiệu ứng động cho blogspot

Demo Click here

Hôm nay chủ nhật nên cũng tranh thủ ở nhà viết thêm một bài nữa.
BDK xin giới thiệu một thủ thuật cũng nhỏ thôi nhằm giúp làm đẹp trang blogspot của bạn.
Như bạn cũng thấy ở hình ảnh bên trên là nút Demo và Download lúc bình thường và lúc rê chuột vào với hiệu ứng động khá đẹp mắt.

Để sử dụng button này bạn chèn đoạn code sau vào trước thẻ ]]></b:skin>

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

Lưu template lại coi như là bạn đã cài đặt cho blog của mình rồi. Đến khi sử dụng chỉ việc dán đoạn code sau vào nơi muốn hiển thị thôi.

<div id="wrap">
<a class="btn-slide" href="#" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="btn-slide2" href="#" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Thay dấu # thành liên kết của bạn, riêng bạn nào muốn thay đổi icon của nút Demo và Download (phần chữ màu xanh) thì xem thêm bài Hướng dẫn cách sử dụng Font Awesome Icons.
Chúc bạn thành công!

Nguồn: blogduykhanh.blogspot.com