Cara Membuat Tombol Dengan Css Dan Font Awesome ~ HeiBroku

Pada kesempatan kali ini saya akan membuat sebuah tutorial tentang "Cara Membuat Tombol Dengan Css Dan Font Awesome Di Blogger" tombol ini berbentuk atau berdesign flat ui jadi sangat cocok digunakan untuk tombol link download, tombol demo, ataupun untuk tombol link, tentu saja bisa anda gunakan sesuai keinginan anda.

Dengan memasang tombol ini tidak akan mempengaruhi loading halaman karena hanya meload css dan icon kecil dari font awesome. Selain itu tombol dengan css ini juga berguna untuk mempermudah dan memperindah postingan blog. Untuk priview tombol dengan css ini bisa anda lihat di bawah ini:

Tombol 1 Tombol 2

Nah tombol seperti di ataslah yang akan kita buat, icon pada tombol di atas bisa anda ganti saat memasang script untuk tombolnya nanti, namun ada satu hal yang perlu diperhatikan, sebelum memasang script css untuk tombol ini pastikan bahwa anda sudah memasukkan kode css untuk font awesome.

Cara Membuat Tombol Dengan Css Dan Font Awesome

Tujuannya agar icon muncul saat memasang tombol nanti, jika pada template anda belum terdapat kode css untuk font awesome, anda dapat menambahkan kode di bawah ini kemudian letakkan kodenya di bawah <head> ataupun di atas </head>, sebenarnya kode ini dapat dipasang dimana saja di atas </body> juga bisa.

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

Jika anda sudah memasang kode di atas kemudian cari kode ]]></b:skin> kemudian letakkan kode di bawah ini tepat di atas kode ]]></b:skin> atau kode <style>

/* CSS Simple Button Flat UI */
#wrap {
margin:20px auto;
text-align:center;
}
#wrap br {
display:none;
}
.btn {
display:inline-block;
position:relative;
font-family:'Source Sans Pro', Helvetica, sans-serif;
background:#3b3f48;
padding:6px 14px;
font-size:14px;
margin:0 3px;
color:#fff!important;
border-radius:3px;
border:none;
text-transform:uppercase;
text-decoration:none;
transition:all 0.3s ease-out;
}
.btn.down {
background:#3b3f48;
color:#fff!important;
}
.btn.down:hover,.btn.down:active,.btn:hover,.btn:active {
background:#fc4f3f;
color:#fff;
}
a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active {
color:#fff;
}
.btn i {
margin-left:10px;
font-weight:normal;
font-family:FontAwesome;
}

Memasang Tombol Dengan Css dan Font Awesome

Jika kode di atas sudah anda pasang, silahkan save template anda, kemudian anda tinggal memasang kode di bawah ini pada artikel anda, namun gunakan mode html atau tempatkan kode di bawah pada html agar tombol muncul pada artikel anda, silahkan buat postingan baru/entri baru lalu masukkan kode di bawah pada bagian html:

<div id="wrap">
<a class="btn down" href="#" rel="nofollow" target="_blank">Tombol 1<i class="fa fa-paper-plane"></i></a>
<br />
<a class="btn down" href="#" rel="nofollow" target="_blank">Tombol 2<i class="fa fa-download"></i></a>
</div>

Setelah anda menempatkan kode di atas pada halaman html artikel silahkan publikasikan artikel anda dan lihatlah artikel anda maka akan muncul tombol dengan icon font awesome. Itulah sekilas tutorial tentang "Cara Membuat Tombol Dengan Css Dan Font Awesome" semoga artikel ini dapat berguna dan bermanfaat, sekian dan terima kasih.