Tạo nút DEMO và DOWNLOAD cho bài viết trong blog bằng hiệu ứng cực đẹp

khi bạn click vào nút download thì sẽ hiển thị silder cực kỳ hấp dẫn                             

Trong bài viết này share4u sẽ 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 sliderVD: blog của bạn chuyên viết về các bài hướng dẫn chia sẻ, và dowload chẳng hạn như những blog chuyên chia sẻ template mẫu blog thì việc chèn các nút DOWNLOAD hay DEMO là không thể thiểu, button DOWNLOAD và DEMO với hiệu ứng slider cực kỳ đẹp và hấp dẫn.Lưu ý là trước khi sử dụng cách tạo button DEMO, DOWNLOAD theo phong cách tôi hướng dẫn bên dưới, bạn hãy chắc rằng blog của bạn đã sử dụng font hợp lýCách tạo button download, demo  cho blogger

Đầu tiên các bạn 

mở blogger lên --> html edit --> tìm thẻ </style> hoặc ]]></b:skin>

Và dán mã dưới đây vào trước 2 thẻ trên

#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 lại mẫu 

Để đảm bảo cho mọi bài viết đều có thể sử dụng được butto với hiệu ứng silder thì các bạn vào phần cài đặt bài đăng như hình dưới và chọn tùy chọn và click vào ''Nhần ''enter'' để ngắt dòng

Cách tạo button demo và download trong bài đăng

Sau khi đã làm các bước trên , mỗi khi đăng bài và các bạn sử dụng 2 button demo và dowload, hoặc tùy ý các bạn chỉnh sửa thì các bạn sẽ đăng bài như bên dưới

Mở bài đăng mới lên -> soạn thảo chế độ html và dán mã sau vào

<div id="wrap">
<a href="http://share4u.design" 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="http://share4u.design" 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>

Sau đó chỉnh sửa các thông số bên trên theo yêu cầu của bạn
vd: từ DEMO các bạn có thể chỉnh thành '' XEM''  hoặc DOWNLOAD các bạn có thể đổi thành ''TẢI VỀ'' 

Còn phần địa chỉ của 2 button demo và dowload  các bạn thay url của các bạn muốn hiển thị ở button demo và dowload thay http://share4u.design  = url mà các bạn muốn hiển thị  

CHÚC CÁC BẠN THÀNH CÔNG. NHỚ +1