Membuat CSS Button Flat UI Dengan Font Awesome

Pada kesempatan kali ini, saya akan menambahkan sedikit bumbu dari CSS yang terdapat di sebuah tombol. Bumbu tersebut adalah Flat UI. Flat UI sangat cocok apabila diletakkan ke dalam tombol CSS dengan Font Awesome.
Dewa Teknik
Button Flat UI

Sebelumnya saya telah membahas bagaimana Cara Memasang Font Awesome di Blog dan penerapannya ke dalam tombol CSS. Font Awesome dapat mempercantik tampilan button sehingga akan terasa lengkap fungsi dari sebuah tombol tersebut. Pada kesempatan kali ini, saya akan menambahkan sedikit bumbu dari CSS yang terdapat di sebuah tombol. Bumbu tersebut adalah Flat UI. Flat UI sangat cocok apabila diletakkan ke dalam tombol CSS dengan Font Awesome. Berikut kode warna Flat UI yang saya dapat dari mbak Dian Anarchyta:
Setelah mengetahui kode warna yang cocok, untuk membuat sebuah button Flat UI, diperlukan sebuah CSS value yang akan menjadi kombinasi antara warna dan style yang dipakai. Berikut langkah-langkah untuk membuat CSS Button Flat UI:

Langkah 1

  1. Memasang Font Awesome di template sobat.
  2. Jika sobat belum memasang Font Awesome, klik link dibawah ini:

Langkah 2

  1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
  2. Pada menu Dashboard, Pilih Template --> Edit HTML.
  3. Cari kode ]]></b:skin> dengan cara 
    Ctrl
    +
    F
    .
  4. Kemuadian salin kode dibwah ini tepat diatasnya.
    5. .bton-grup{width:500px;text-align:center;margin:5px auto}
.bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)}
.bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)}
.bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)}
.bton.orange{background:#FF7F00}
.bton.purple{background:#8e44ad}
.bton.blue{background:#297fb8}
.bton.red{background:#e74c3c}
  5. Simpan

Langkah 3


  1. Penerapan button pada artikel atau di halaman.
    2. <div class='bton-grup'>
<a href='http://bacilsoft.blogspot.com' class='bton'><span><i class="fa fa-download"></i></span>Example</a>
<a href='http://bacilsoft.blogspot.com' class='bton orange'><span><i class="fa fa-file-text"></i></span>Example</a>
<a href='http://bacilsoft.blogspot.com' class='bton purple'><span><i class="fa fa-folder-open"></i></span>Example</a>
<a href='http://bacilsoft.blogspot.com' class='bton blue'><span><i class="fa fa-paperclip"></i></span>Example</a>
<a href='http://bacilsoft.blogspot.com' class='bton red'><span><i class="fa fa-link"></i></span>Example</a>
</div>
    Ubah link diatas dengan target libk sobat dan Ubah kode ikon Font Awesome sesuai keinginan
  2. Untuk melihat demo, klik link dibawah ini
Dewa Teknik