18 Tombol Dengan Efek Background Transisi


Cara Membuat Tombol Dengan Efek Background Transisi. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 27 Tombol Dengan Efek 2 Dimensi.
Tombol Efek Background Transisi  ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...
18 Tombol Dengan Efek Background Transisi
18 Tombol Dengan Efek Background Transisi 

Simak langkah-langkahnya dibawah ini:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memasang 18 Tombol Dengan Efek Background Transisi 

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

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

Langkah Ke-2: Tambahkan  kode css  dibawah ini sebelum kode </head> silahkan diedit untuk warna dan ukurannya pada kode .btn lalu Simpan Template sobat. Pilihan Warna

<link href="//cdn.rawgit.com/antoncabon/css/master/background-transisi.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
</style> 

Langkah Ke-3:  Tambahkan kode html dibawah ini  pada halaman postingan sobat posisi HTML mode bukan Compose. Pilih salah satu saja sob, ga perlu dipasang semua.

<div class="kotak">
<a href="#" class="btn hvr-fade">Fade</a>
<a href="#" class="btn hvr-back-pulse">Back Pulse</a>
<a href="#" class="btn hvr-sweep-to-right">Sweep To Right</a>
<a href="#" class="btn hvr-sweep-to-left">Sweep To Left</a>
<a href="#" class="btn hvr-sweep-to-bottom">Sweep To Bottom</a>
<a href="#" class="btn hvr-sweep-to-top">Sweep To Top</a>
<a href="#" class="btn hvr-bounce-to-right">Bounce To Right</a>
<a href="#" class="btn hvr-bounce-to-left">Bounce To Left</a>
<a href="#" class="btn hvr-bounce-to-bottom">Bounce To Bottom</a>
<a href="#" class="btn hvr-bounce-to-top">Bounce To Top</a>
<a href="#" class="btn hvr-radial-out">Radial Out</a>
<a href="#" class="btn hvr-radial-in">Radial In</a>
<a href="#" class="btn hvr-rectangle-in">Rectangle In</a>
<a href="#" class="btn hvr-rectangle-out">Rectangle Out</a>
<a href="#" class="btn hvr-shutter-in-horizontal">Shutter In Horizontal</a>
<a href="#" class="btn hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
<a href="#" class="btn hvr-shutter-in-vertical">Shutter In Vertical</a>
<a href="#" class="btn hvr-shutter-out-vertical">Shutter Out Vertical</a>
</div>
Langkah Ke-3: Silahkan diganti nama dari tombol tersebut.



Untuk pilihan warna silahkan sobat cek disini 
SELESAI ! Jika ada kendala silahkan tanyakan pada kolom komentar dan selamat mencoba.

Previous
Next Post »

2 komentar

Click here for komentar
15 Agustus 2015 09.18 ×

keren nih kang untuk buat efek background yang bagus. Salam kenal kunjungan oerdana.

Reply
avatar
Antonius SP
admin
15 Agustus 2015 09.38 ×

Silahkan di sedotkan kang... salam kenal kembali...

Reply
avatar
Thanks for your comment
close