Membuat Button Demo Dan Download Keren

Pagi ini cuacanya sangat cerah, sehingga membuat hati ingin menulis sebuah artikel ( Sok Puitis.... :) :d )
Kali ini Saya akan membagikan sebuah kreasi css yaitu Membuat Button Demo Dan Download Keren, button demo dan download merupakan komponen penting untuk blog penyedia tutorial blogger atau pun untuk demo kreasi-kreasi css.

Langsung saja deh ke tutorialnya.
1. Login ke aku Blogger sobat
2. Masuk ke Template lalu pilih Edit HTML
3. Cari kode ]]></b:skin> ( untuk mempercepat gunakan ctrl + f )
4. Copykan kode dibawah ini dibawah kode ]]></b:skin>

.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:5px;-webkit-border-radius:5px;border-radius:5px;padding: 8px 20px !important; background: #a00f0f; color: #fff !important;text-align: center;text-decoration:none; 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:5px;-webkit-border-radius:5px;border-radius:5px;padding: 8px 20px !important; background: #454242; color: #fff !important;text-align: center;text-decoration:none; 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: #000; 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: #000; 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 }

5. Setelah itu Save Template sobat


Untuk cara penggunaan masukan kode dibawah ini di dalam posting dalam mode Edit HTML

<div style="text-align: center;">
   <ul class="button">
      <li><a class="demo" href="http://krl-blog.blogspot.com" target="_blank">Demo</a></li>
      <li><a class="download" href="http://krl-blog.blogspot.com" target="_blank">Download</a></li>
   </ul>
</div>
<div class="clear"></div>

Ganti http://krl-blog.blogspot.com dengan konten demo dan download sobat
Semoga Bermanfaat....

• Demo
• Download