Cara Membuat Tombol Demo dan Download ala Kang Ismet

Cara Membuat Tombol Demo dan Download ala Kang Ismet - Ya, Malam ini saya akan berbagi Cara Membuat Tombol Demo dan Download ala Kang Ismet. Sekarang sudah banyak macam-macam Tombol untuk Demo ataupun Download dimana-mana, dan sekarang saya akan berbagi Tombol Demo dan Download ala Kang Ismet dengan warna dan efek Hover yang halus, dan lumayan bagus untuk dipandang.
Untuk Demo bisa lihat dibawah ini.

Untuk cara penerapannya sangat mudah, berikut ini cara untuk menerapkannya.
Masuk ke www.blogger.com
Buka Template dan Klik Edit HTML
Letakan kode dibawah ini 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}

Kemudian Simpan Template / Save Template. Selesai.
Untuk menggunakan di postingan blog anda, silahkan copy code ini di HTML.

     <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 :

Kode yang bercetak Tebal, Miring, dan Berwarna Merah adalah URL Tujuan untuk Demo.
Kode yang bercetak Tebal, Miring, dan Berwarna Biru adalah URL Tujuan untuk Download.

Sekian dari saya, semoga artikel ini bermanfaat untuk anda.
Terimakasih.

Source Code by : http://blog.kangismet.net/