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.

5 komentar:

  1. Balasan
    1. Pasti ada yang salah dalam penerapan kodenya gan
      coba dicek lagi :koffe

      Hapus
  2. Contoh tombol download dan gambar pada blog ini ga keluar gan.....coba di upload ulang menggunakan halaman blog ini.. jangan mengcopy paste upload pada halaman lainnya yang akan punya..
    sorry gan.. cuma saran...

    BalasHapus

 
Top