Membuat Tombol Demo dan Download Keren

Cara membuat Tombol Demo dan Download Keren - Kali ini saya akan berbagi tips bagaimana Cara Memasang Tombol/Button Demo ataupun Download seperti yang digunakan blog ini, Cukup mudah kok,,anda hanya perlu menambahkan kode CSS dan HTML di bawah ini :

Sebelumnya anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah ini sebelum

 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Buka Template > Edit HTML > Terapkan kode di bawah ini sebelum

 
.whitebutton {

    margin: 20px auto;

    padding: 20px 0;

    width: 200px;

}



.whitebutton a {

    background: #fff;

    color: #666;

    display: block;

    font-size: 17px;

    font-weight: 700;

    font-family: 'Arial',Verdana,sans-serif;

    height: 50px;

    line-height: 50px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    width: 200px;

    position: relative;

    z-index: 2;

}



.whitebutton a:before {

    content: '\f019';

    font-family: FontAwesome;

    font-weight: normal;

    padding: 8px;

    margin-left: -12px;

    margin-right: 6px;

}



.whitebutton span {

    background: #444;

    color: #fff;

    display: block;

    font-size: 12px;

    font-family: 'Arial', Verdana,sans-serif;

    height: 40px;

    line-height: 40px;

    text-align: center;

    width: 200px;

    z-index: 1;

    text-transform: uppercase;

    font-weight: bold;

}



.whitebutton .up {

    background: #e25734;

    margin: -25px auto;

    opacity: 0;

    border-radius: 0 0 5px 5px;

    transform: translate(0,-50px);

    transition: 350ms;

}



.whitebutton .down {

    margin: -30px auto;

    opacity: 0;

    border-radius: 5px 5px 0 0;

    transform: translate(0,-50px);

    transition: 350ms;

}



.whitebutton .down:before {

    content:'\f14a';

    font-family: FontAwesome;

    font-weight: normal;

    margin-right: 6px;

    color: #aaa;

}



.whitebutton:hover .up {

    opacity: 1;

    transform: translate(0,0);

}



.whitebutton:hover .down {

    opacity: 1;

    transform: translate(0,-90px);

}



.whitebuttondemo {

    margin: 20px auto;

    padding: 20px 0;

    width: 200px;

}



.whitebuttondemo a {

    background: #e25734;

    color: #fff;

    display: block;

    font-size: 17px;

    font-weight: 700;

    font-family:'Arial',Verdana,sans-serif;

    height: 50px;

    line-height: 50px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    width: 200px;

    position: relative;

    z-index: 2;

    transition: 350ms;

}



.whitebuttondemo a:before {

    content:'\f002';

    font-family: FontAwesome;

    font-weight: normal;

    padding: 8px;

    margin-left: -12px;

    margin-right: 6px;

}



.whitebuttondemo a:hover {

    color: #fff;

}



.whitebuttondemo span {

    background: #444;

    color: #fff;

    display: block;

    font-size: 12px;

    font-family: 'Arial', Verdana,sans-serif;

    height: 40px;

    line-height: 40px;

    text-align: center;

    width: 200px;

    z-index: 1;

    text-transform: uppercase;

    font-weight: bold;

}



.whitebuttondemo .up {

    background: #444;

    margin: -25px auto;

    opacity: 0;

    border-radius: 0 0 5px 5px;

    transform: translate(0,-50px);

    transition: 350ms;

}



.whitebuttondemo:hover .up {

    opacity: 1;

    transform: translate(0,0);

}

1. Bagi yang menggunakan

Terapkan HTML berikut di postingan pada tab (bukan compose)

 
<div class="whitebuttondemo">

<a href="#" target="_blank">Demo</a><br>

<span class="up">click to view</span></div>

<br>

<div class="whitebutton">

<a href="#" target="_blank">Download</a><br>

<span class="up">click to begin</span><br>

<span class="down">1.6MB .rar</span></div>

2. Bagi yang menggunakan

Terapkan HTML berikut di postingan pada tab (bukan compose)

 
<div class="whitebuttondemo">

      <a href="#">Demo</a>

      <span class="up">click to begin</span>

    </div>



<div class="whitebutton">

      <a href="#">Download</a>

      <span class="up">click to begin</span>

      <span class="down">1.6MB .rar</span>

    </div>

Kemudian isikan link tautan anda pada kode yang saya tandai "#", selesai.

Hasilnya akan tampil seperti di bawah ini

Demo
click untuk Melihat

Download
click untuk Mulai
5.3MB .rar

Cukup mudah bukan, silahkan dikreasikan kembali dan selamat mencoba.