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

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.

DEMO

Để sử dụng button này bạn chèn đoạn code sau vào trước thẻ </head> #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!

Tác giả: Khánh

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.

KHI TA CHIA SẺ - HẠNH PHÚC ĐƯỢC NHÂN LÊN

CÓ THỂ BẠN MUỐN XEM