Membuat Button Text versi 2

Setelah selesai dengan button Unik versi 1 chekmad ingin melanjutkan dengan button versi 2. ada beberapa perbedaan button versi dengan versi 2 yang kita buat kali ini.

Ingin tahu di mana bedanya silahkan ikuti artikel di bawah ini :

Langkah 1 
  1. Mari menuju Ke Blogger >> Template >> Backup Template Anda
  2. Klik Edit HTML dan cari kata kunci </ head> pada blog tentunya
  3. Paste kode  Berikut di atas </ head>
<!-- chekmad Buttons Versi 2 Start -->
<style type="text/css">
a.button{color: #fff ;font-size: 14px;font-weight: bold; margin-bottom: 6px; text-transform: uppercase;}
.button1{background-color:#3498db ; color:#fff;}
.button1{display: block; font-size: 18px;line-height: 18px; padding: 10px 0; position: relative;text-align: center;text-decoration: none; transition: all 0.25s linear 0s; width: 100%;}
.button2{background-color:#2ecc71 ; color:#fff;}
.button2{display: block; font-size: 18px;line-height: 18px; padding: 10px 0; position: relative;text-align: center;text-decoration: none; transition: all 0.25s linear 0s; width: 100%;}
.button3{background-color:#1abc9c ; color:#fff;}
.button3{display: block; font-size: 18px;line-height: 18px; padding: 10px 0; position: relative;text-align: center;text-decoration: none; transition: all 0.25s linear 0s; width: 100%;}
.button4{background-color:#900 ; color:#fff;}
.button4{display: block; font-size: 18px;line-height: 18px; padding: 10px 0; position: relative;text-align: center;text-decoration: none; transition: all 0.25s linear 0s; width: 100%;}
a:hover.button{background-color:#111111 !important;}
</style>
<!-- chekmad Buttons End -->


Silahkan Simpan setelah anda paste kode di atas.



Petunjuk penggunaan :

  1. <a class='button1' href='button link'>Button Text!</a>
  2. <a class='button2' href='button link'>Button Text!</a>
  3. <a class='button3' href='button link'>Button Text!</a>
  4. <a class='button4' href='button link'>Button Text!</a>
Keterangan :
button Link = gunakan untuk memasukkan link yang anda inginkan
Button Text = Gunakan untuk text yang ingin di tampilkan

nah begitu ceritanya button versi 2 dari chekmad semoga berguna bagi para blogger semua untuk memperindah halaman page sobat  Salam Chekmad


Klik disini Untuk melihat Hasilnya
Membuat Button Text versi 2 Membuat Button Text versi 2 Reviewed by Chek 404 on Oktober 09, 2014 Rating: 5
Diberdayakan oleh Blogger.