Cara Membuat Tombol Demo dan Donload Super Keren

Tutorial Kali Ini adalah Cara Membuat Tombol Demo dan Donload Super Keren,
Selain Menarik di Mata Pengunjung Bog, Tombol ini juga bisa bergerak jika di sentuh Cursor.
sehingga terkesan Keren Abis di mata Para Pengunjung Blog Anda.

Masalah Fungsi, Tentunya Anda sudah Tau , Karena anda sudah sering menemui Tombol Demo dan donload ketika berkunjung ke situs - situs Toko Online, Situs yang Menawarkan Template, dll.

Baiklah Kita Mulai saja cara Penerapanya.


1. Buka HTML ( di Pengaturan Template Anda ).

2. Cari Kode </head> dan Letakkan Kode di bawah ini sebelum Kode </head>.


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




3. Kalau Sudah, Cari Kode ]]></b:skin> , dan letak'kan kode di bawah ini di atas kode ]]></b:skin>

#wrap { margin:20px auto; text-align:center; }

#wrap br { display:none; }

.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }

.bie-slide2 { border:2px solid #36D7B7; }

.bie-slide:hover { background-color:#F9690E; }

.bie-slide2:hover { background-color:#36D7B7; }

.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }

.bie-slide2:hover span.circle2 { color:#36D7B7; }

.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }

.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }

.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }

.bie-slide2 span.circle2 { background-color:#36D7B7; }

.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }

.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }

.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }

.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }

Contoh :




4. Klik Simpan .

5. Klik New Entri > HTML ( Bukan Compose ).
Lalu Copy Pastekan Kode di Bawah ini di halaman HTML.


<div id="wrap">
<a class="bie-slide" href="http://www.irinmedia.com/2017/04/template-blog-super-keren-jalan-tikus.html" 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="bie-slide2" href="http://www.irinmedia.com/2017/04/template-blog-super-keren-jalan-tikus.html" 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> 


Contoh :




Keterangan :

Tulisan Berwarna Biru silahkan di ganti dengan link Demo dan Tulisan Merah Ganti dengan Link Donload Anda.


5. Simpan & Lihat Hasilnya.

Demo Click here Download Click here

Terimakasih Telah Membaca Artikel Cara Membuat Tombol Demo dan Donload Super Keren, Semoga Bermanfa'at Untuk Semua.

Jangan Lupa, silahkan Kunjungi Artikel Menarik Lainya . .

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.