Cara Membuat Tombol Dengan Css Dan Font Awesome
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:
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.
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>
Memasang Tombol Dengan Css dan Font Awesome/* 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;
}
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:
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.
<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.
nambah pengetahuan nih, makasih
BalasHapuspostnya nambah ilmu,lanjutkan Trus gan berbagi ilmunya :)
BalasHapusmenambah ilmu, (y)
BalasHapuskeren gan fonstnyaa :D
BalasHapusbermanfaat bgt gan :D thx sblmnya ya
BalasHapusohh iya jgn lupa mampir ke tukangshare.com ya
Masih bingung ane sob ._.
BalasHapusWaaah langsung di coba nih
BalasHapusklw blh tau,, gunanya untuk apa ya tombol gitu..
BalasHapusmakasih kak, artikelnya sangat bermanfaat bagi pemula seperti saya ini
BalasHapusMakasih banyak
Waduh bermanfaat sekali bagi saya yang pemula. dapat ilmu lagi nih hehehe makasih banyak
BalasHapusSama-sama mas :)
Hapusok mantab kaka
BalasHapusGolden Nugget Casino Resort, Reno, NV - Mapyro
BalasHapusGolden 서울특별 출장샵 Nugget Hotel & Casino is 김포 출장마사지 a 강릉 출장마사지 casino 전라북도 출장마사지 located 성남 출장마사지 in Reno, Nevada. It's situated in the heart of the Fremont Street Experience.