27 Icons Tombol Dengan Berbagai Efek


Cara Membuat 27 Icons Tombol Dengan Berbagai Efek. 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 18 Icons Tombol Dengan Berbagai Efek.
27 Icons Tombol Dengan Berbagai Efek 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...
27 Icons Tombol Dengan Berbagai Efek
27 Icons Tombol Dengan Berbagai Efek

Simak langkah-langkahnya dibawah ini:

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

Cara Memasang 27 Icons Tombol Dengan Berbagai Efek 

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/icons.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-icon-back">Icon Back</a>
<a href="#" class="btn hvr-icon-forward">Icon Forward</a>
<a href="#" class="btn hvr-icon-down">Icon Down</a>
<a href="#" class="btn hvr-icon-up">Icon Up</a>
<a href="#" class="btn hvr-icon-spin">Icon Spin</a>
<a href="#" class="btn hvr-icon-drop">Icon Drop</a>
<a href="#" class="btn hvr-icon-fade">Icon Fade</a>
<a href="#" class="btn hvr-icon-float-away">Icon Float Away</a>
<a href="#" class="btn hvr-icon-sink-away">Icon Sink Away</a>
<a href="#" class="btn hvr-icon-grow">Icon Grow</a>
<a href="#" class="btn hvr-icon-shrink">Icon Shrink</a>
<a href="#" class="btn hvr-icon-pulse">Icon Pulse</a>
<a href="#" class="btn hvr-icon-pulse-grow">Icon Pulse Grow</a>
<a href="#" class="btn hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
<a href="#" class="btn hvr-icon-push">Icon Push</a>
<a href="#" class="btn hvr-icon-pop">Icon Pop</a>
<a href="#" class="btn hvr-icon-bounce">Icon Bounce</a>
<a href="#" class="btn hvr-icon-rotate">Icon Rotate</a>
<a href="#" class="btn hvr-icon-grow-rotate">Icon Grow Rotate</a>
<a href="#" class="btn hvr-icon-float">Icon Float</a>
<a href="#" class="btn hvr-icon-sink">Icon Sink</a>
<a href="#" class="btn hvr-icon-bob">Icon Bob</a>
<a href="#" class="btn hvr-icon-hang">Icon Hang</a>
<a href="#" class="btn hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
<a href="#" class="btn hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
<a href="#" class="btn hvr-icon-buzz">Icon Buzz</a>
<a href="#" class="btn hvr-icon-buzz-out">Icon Buzz Out</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 01.57 ×

Jadi terinspirasi nich mas..mau buat tutor cara buat button....

Reply
avatar
Antonius SP
admin
15 Agustus 2015 02.26 ×

silahkan mas... ini juga blog baru dan terus terang masih perlu promosi dan jika mas wahab berkenan silahkan re posting artikel saya ini dengan kredit link, secra blog sampean sudah terkenal gitu :-bd

Reply
avatar
Thanks for your comment
close