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 yang pastinya keren dengan warna yang cerah. Tombol ini juga sudah saya sempurnakan menjadi valid HTML5.
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.Untuk Demonya, nanti akan seperti ini :
Cara membuatnya :
Tambahkan kode di bawah ini di atas
]]></b:skin> atau </style>/*Download Demo Button*/
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo {opacity:1;padding:7px 14px!important;background:#E55E48;color:#fff!important;font-weight:400;font-size:14px;font-family:'Oswald',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:opacity 0.4s ease-in-out;}
.download {opacity:1;padding:7px 14px!important;background:#5FAAE3;color:#fff!important;font-weight:400;font-size:14px;font-family:'Oswald',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.4s ease-in-out;}
.demo:hover {background:#d97060;transition:all .4s ease-in-out;}
.download:hover {background:#9dadc1;transition:all .4s ease-in-out;}
.demo:active {cursor:pointer;background:#9dadc1;transition:all .4s ease-in-out;}
.download:active {cursor:pointer;background:#d97060;transition:all .4s ease-in-out;}
.demo:before {content:'\f135';display:inline-block;vertical-align:top;margin-right:10px;
width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download:before {content:'\f019';display:inline-block;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
Untuk penggunaannya, copy code berikut di postingan pada mode
HTML<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="Url yang Dituju" target="_blank" title="Demo">Demo</a></li>
<li><a class="download" href="Url yang Dituju" target="_blank" title="Download">Download</a></li>
</ul>
</div>
Selain itu, tombol ini dilengkapi dengan Font Awesome yang menjadikanya lebih keren dan tak kalah juga tombol tersebut juga Responsive. Bagi anda yang suka dengan tombol tersebut silahkan dicoba.
