Cara Membuat Style Tombol Demo dan Download

Written By PENDIDIDKAN Wednesday, October 15, 2014 Add Comment Edit

Cara Membuat Style Tombol Demo dan Download - Tombol Demo dan Download biasanya digunakan untuk demontrasi sebuah template atau hanya sekedar link download dari pokok ulasan pada postingan. Pada postingan sebelumnya saya telah mengulas tombol Download namun pada postingan sebelumnya penerapannya hanya melalui HTML.

Pada penerapan tombol Demo dan Download sedikit berbeda, berikut penerapan Membuat Style Tombol Demo dan Download:

Live Demo

Cara Membuat Style Tombol Demo dan Download

Silahkan anda masuk keEditor Template, kemudian anda tambahkan kode berikut diatas ]]></b:skin>

/* AakButton */ .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 penerapan diatas anda kembali ke dhasbor, anda memasukkan script dibawah ini kedalam postingan dengan mode ~~Compose~~ HTML.

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

Anda bisa memasukkan script diatas pada setiap kali ingin menampilkan tombol Demo dan Download pada postingan,

Demikian Cara Membuat Style Tombol Demo dan Download, semoga bermanfaat!