Cara Membuat Tombol Demo dan Download ala Kang Ismet

Demo and Download Button

Kali ini, saya akan memberikan 'Cara Membuat Tombol / Button ala Kang Ismet'. Banyak sekali para Blogger menggunakan fitur Button buatannya sendiri. Namun menurut pendapat saya, Button ini sederhana, simple, enak dilihat deh.

Untuk Demonya, silahkan dilihat :

Cara Pemasangan

Masuk Blogger
Template > Edit HTML
Copy kode CSS dibawah ini, Paste diatas kode ></b:skin>

/* -- Kang Ismet Button --*/

 .button{float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both}

 .button ul{margin:0; padding:0}

 .button li{display:inline; margin:0; padding:0}

 .demo{border:none; -moz-border-radius:2px; -webkit-border-radius:2px; 
border-radius:2px; padding:8px 80px !important; background:#E55E48; 
color:#fff !important; text-align:center; text-shadow:0 0 1px 
rgba(0,0,0,0.3); -webkit-text-shadow:0 0 1px rgba(0,0,0,0.3); 
-moz-text-shadow:0 0 1px rgba(0,0,0,0.3); -ms-text-shadow:0 0 1px 
rgba(0,0,0,0.3); transition:background-color 1s ease-out 0s; 
-moz-transition:background-color 1s ease-out 0s; 
-webkit-transition:background-color 1s ease-out 0s; 
-o-transition:background-color 1s ease-out 0s; letter-spacing:1px}

 .download{border:none; -moz-border-radius:2px; 
-webkit-border-radius:2px; border-radius:2px; padding:8px 80px 
!important; background:#5FAAE3; color:#fff !important; 
text-align:center; text-shadow:0 0 1px rgba(0,0,0,0.3); 
-webkit-text-shadow:0 0 1px rgba(0,0,0,0.3); -moz-text-shadow:0 0 1px 
rgba(0,0,0,0.3); -ms-text-shadow:0 0 1px rgba(0,0,0,0.3); 
transition:background-color 1s ease-out 0s; 
-moz-transition:background-color 1s ease-out 0s; 
-webkit-transition:background-color 1s ease-out 0s; 
-o-transition:background-color 1s ease-out 0s; letter-spacing:1px}

 .demo:hover{background:#454242; text-shadow:0 0 1px #222; 
-moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; 
-ms-text-shadow:0 0 1px #222}

 .download:hover{background:#454242; text-shadow:0 0 1px #222; 
-moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; 
-ms-text-shadow:0 0 1px #222}

Simpan Template.

Kemudian coba buat Entri atau Laman ( Terserah anda ) baru.
Beralih ke Mode HTML. ( Disebelah kanan Compose )
Copy kode dibawah ini, dan Paste. Klik Pratinjau dan lihat hasilnya.

  <div style="text-align: center;">

    <ul class="button">

    <li><a class="demo" href="http://blog.kangismet.net" target="_blank">Demo</a></li>

    <li><a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li>

    </ul>

    </div>

    <div class="clear"></div> 

Keterangan

Silahkan ganti kode yang bercetak miring berwarna merah untuk Link DEMO.
Silahkan ganti kode yang bercetak miring berwarna biru untuk Link Download.

Credits :
http://xpress-community.blogspot.com/2013/08/cara-membuat-tombol-demo-dan-download.html

Judul	Cara Membuat Tombol Demo dan Download ala Kang Ismet
Deskripsi	Demo and Download Button Kali ini, saya akan memberikan 'Cara Membuat Tombol / Button ala Kang Ismet'. Banyak sekali para Blogg...
Author	Unknown
Author Rating	4/5 Suara Dari 777 Ulasan