Tạo nút Demo và Download đẹp cho Blogger

Tạo nút Demo và Download đẹp cho Blogger

Tạo nút Demo và Download cho bài viết blog bằng slider cực kỳ đẹp và hấp dẫn, nút download và demo cho bài viết blogspot, khi bạn click vào nút download thì sẽ hiển thị silder cực kỳ hấp dẫn Button download và demo cho bài viết, chia sẻ cho mọi người cách tạo nút DEMO và DOWLOAD trong bài viết blog với hiệu ứng slider.

Cách tạo button Download, Demo cho blogger.

Đầu tiên các bạn mở Blogger lên -->Mẫu --> Chỉnh Sửa HTML --> tìm thẻ </style> hoặc ]]></b:skin>
Và dán mã dưới đây vào trước hai thẻ trên và bấm Save (lưu lại).

#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;
}

Tiếp Đến: Cách tạo button Demo và Download trong bài đăng

mỗi khi bạn viết bài mà cần đến 2 nút này thì bạn vào soạn thảo bằng html để chèn code sau:

<div id="wrap">
<a href="//khairiwalkaz.blogspot.com" class="btn-slide" 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 href="//khairiwalkaz.blogspot.com" class="btn-slide2" 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>

Chú Ý:
Bạn thay "//khairiwalkaz.blogspot.com" thành link mà bạn muốn!

By: Khari Walkaz