Cara Mudah Membuat Tombol Download dan Demo - Cara ini adalah untuk memperbagus tombol ''Download'' dan ''Demo'' dengan menambah CSS kepada blog anda. Dan saya akan memberikan tombolnya seperti ini
Tombol ini udah mempercantik/memperbagus biasanya kita mau download salah satu software atau share template. Dengan menambahkan CSS ini blog kita akan terlihat cantik dan di sukai pengunjung. Untuk mempersingkat waktu kita bisa memulai caranya langsung.
Pertama-tama anda masuk edit html setelah itu letakan kode di bawah ini tepat di atas ]]><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 }
Setelah di pastekan silahkan simpan.
Cara penggunaanya copypaste kode di bawah ke html bukan compose (saat menulis artikel)
<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>
Warna merah bisa di ganti sesuka anda.
CSS Tombol ini di buat oleh : KangIsmet bila anda kurang suka dengan tombolnya biar searching di google sangat banyak yang menyediakan/memperbagus tombol download dan demo.
Semoga artikel yang saya sampaikan bisa di pahami oleh teman blogger.