Februari 05, 2014

Membuat Download Button Dengan Font Awesome

Membuat Download Button Dengan Font Awesome - Cara membuat download button atau tombol download menggunakan font awesome yang berfungsi sebagai icon pada sebuah tombol download ataupun element tertentu. Kali ini kita akan belajar bagaimana cara membuat download button seperti yang ada di pada blog devilzart.com ini. Tutorial ini saya dedikasikan karena permintaan teman blogger kita yang sempat berkunjung ke blog ini.

Sebelum memulai tutorial membuat download button dengan Font Awesome. saya berikan sedikit penjelasan tentang font awesome. Font Awesome adalah salah satu jenis webfont yang mempunyai character berupa simbol atau icon unik yang bisa digunakan sebagai property sebuah element pada halaman website. Pada umumnya digunakan untuk Twitter Bootstrap, ada lebih dari 100+ ikon di Font awesome dan akan bertambah tiap rilis nya. Font Awesome ini sangat menarik dan bermanfaat sekali untuk membuat sebuah tampilan download button, demo button, ataupun simbol pada element tertentu. Selain hal tersebut font awesome ini dapat menggantikan sebuah icon image sehingga loading blog bisa lebih cepat karena icon yang kita gunakan adalah sebuah font yang ukurannya dipastikan lebih kecil dari sebuah file image.

Membuat Download Button Dengan Font Awesome

DEMO DOWNLOAD BUTTON FONT AWESOME

Sliahkan klik tombol dibawah ini untuk melihat dan menentukan CSS content dari Font Awesome

CDN Font Awesome

Sebelum mengikuti tutorial ini silahkan copy code CSS ini diatas code </head>

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

Keterangan!!
  • Kode css tersebut adalah kode standar font awesome dengan CDN netdna.bootstrapcdn.com, jika sobat ingin menyimpannya di hosting sobat sendiri silahkan download CSS nya di font-awesome.css, lalu copy pada notepad dan save dengan ektensi .css, contoh : fontawesome.css.
  • Upload file ke hosting yang sobat punya dan ganti //netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css dengan link url file font awesome yang sobat upload tadi.

Setelah Font Awesome CSS terpasang di template blog sobat silahkan copy code css dibawah ini dan letakan di atas ]]></b:skin>

.download a{
background-color:#6bb1ff;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  border-radius:0 4px 15px 0;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

/*--ICON Font Awesome--*/
.download a:before{
  content:"\f0ed";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
/*--Sesuaikan code dibawah dengan template anda--*/
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

/*--ketika tombol disentuh--*/
.download a:hover{
  background:#005168
}

Keterangan!!
  • background
    warna download button.
  • margin
    jarak download button dengan element lain diluar download button.
  • padding
    jarak download button dengan text di dalam download button (jika diganti, maka sesuaikan padding pada .download a:before).
  • border-radius
    besaran sudut pada download button.
  • color
    warna text pada download button.
  • opacity
    tingkat transparancy element.
  • content
    code icon font awesome silahkan lihat dihalaman list font awesome.

Cara Menggunakan Download Button Font Awesome

Gunakan code HTML berikut ini pada halaman yang ingin kalian ingin tambahkan tombol download dengan Font Awesome.

<div class="download" style="text-align: center;">
<a href="http://tny.cz/7d7990e2" rel="nofollow" target="_blank" title="VCC GRATIS UPDATE KE 9" class="btn-wrap">VCC GRATIS UPDATE KE 9</a>
</div>

Silahkan berekplorasi sendiri dengan code - code diatas sehingga sobat dapat menciptakan kreasi download button sendiri. jika ada kesulitan silahkan tanyakan melalui kolom komentar. Jika saya mampu pasti akan saya bantu semaksimal mungkin. Jadikan sebuah topik menjadi ajang diskusi sehingga menjadi tempat belajar yang mengasikan. Terima kasih atas kunjungan dan apresiasi para sobat blogger. Adalah sebuah semangat untuk saya jika artikel ini bermanfaat untuk belajar bersama.

10 comments » Membuat Download Button Dengan Font Awesome

Problem! Kok gini Kang
http://1.bp.blogspot.com/-ldCqAfg7LQ0/UvsZqjSzaaI/AAAAAAAAACM/QkiyBIbIFY8/s1600/tombol.png

Balas

sebentar sob, coab akan saya cek cssnya.

Balas

sudah diperbaiki sob, salin kembali CSS nya

Balas

Terima kasih kang atas tutorialnya. Sydah terpasang di blog sy Bagaimana kang Pembuatan kayak gini. Maaf Kang selalu tanya kan masih newbie :
http://3.bp.blogspot.com/-3WOYsccmwwE/UvvYNqEVncI/AAAAAAAAACc/59bMNqf68hw/s1600/jkl.jpg

Balas

konsepnya sama aja sob. coba kesini » font awesome content list
pelajari, pasti bisa kok buatnya ntar.

Balas

tolong kang cara pembuatannya gimana .... seperti gambar di atas

Balas

nanti sob saya buatin, ini baru frustasi. :D

Balas

oh iya kang....
itu bisa dibuat gak.. icon nya berputar saat mouse menyentuh atau saat diklik aja dia berputar.
bukan berputar putar trus kang,,

Balas

bisa sob, niasanya dengan penambahan hover, tapi blm saya praktekan karena lg bener2 sibuk skarang.

Balas

Mohon maaf komentar pada blog ini kami moderasi dan tidak akan langsung ditampilkan. Silahkan berikan komentar sesuai judul dan isi artikel. Komentar yang mengandung link aktif / live link, iklan, pornografi, dan semacamnya akan dihapus atau kami masukan pada kategori SPAM.

Catatan :
1. Untuk menyisipkan kode gunakan  <i rel="code">kode yang akan disisipkan</i>
2. Untuk menyisipkan kode panjang gunakan <i rel="pre">kode yang akan disisipkan</i>
3. Untuk menyisipkan quote gunakan <b rel="quote">catatan anda</b>
4. Untuk menyisipkan gambar gunakan <i rel="image">URL gambar</i>
5. Untuk menyisipkan video gunakan <i rel="youtube">URL Video youtube</i>

Keterangan :
Gunakan HTML konverter sebelum menyisipkan kode.
Contoh link image : http://blablabla.com/image.jpg.

Profile yang mengandung broken link akan dihapus tanpa pemberitahuan terlebih dahulu.
Konversi Kode

Top