Tombol Demo dan Download Ala Microsoft Cyber

Demo dan Download | Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini.

Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.

Untuk demonya, nantinya seperti ini :

• Demo
• Download

Cara membuatnya :

Langkah 1 : Tambahkan  script diatas </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Langkah 2 : Tambahkan kode di bawah ini sebelum ]]></b:skin>

/* -- Microsoft Cyber 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-radius : 3px; padding : 8px 12px; background : #e74c3c; color : #fff !important ; transition : background-color 1s 0s ease-out; } .download { border-radius : 3px; padding : 8px 12px; background : #3498db; color : #fff !important ; transition : background-color 1s 0s ease-out; } .buton a { color : #fff; } .demo:hover { background : #c0392b; text-shadow : 0 0 1px #222; color : #fff; } .download:hover { background : #2980b9; text-shadow : 0 0 1px #222; color : #fff; } .download:before { content : "\f019"; font-family : FontAwesome; font-weight : normal; padding : 8px; background : #2980b9; margin-left : -12px; margin-right : 6px; border-radius : 3px 0 0 3px; font-size : 16px; } .demo:before { content : "\f06e"; font-family : FontAwesome; font-weight : normal; padding : 8px; background : #c0392b; margin-left : -12px; margin-right : 6px; border-radius : 3px 0 0 3px; font-size : 16px; }

Langkah 3 : Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)

<ul class="button">
<li><a class="demo" href="http://microsoft-cyber.blogspot.com/" rel="nofollow" target="_blank">Demo</a></li>
<li><a class="download" href="http://microsoft-cyber.blogspot.com/" rel="nofollow" target="_blank">Download</a></li>
</ul>

Lebih Lanjut : 

• Ganti <span class="icon-signout"> yang bergaris bawah dengan dengan ini