Cara Menciptakan Tombol Download Sticky Font Awesome

Button Sticky Font Awesome - Hallo sobat.... pada kesempatan kali ini aku akan menyebarkan tips cara menciptakan tombol demo dan Download dapat melayang dan dai percantik dengan font Awesome . Pada prinsipnya tombol tersebut dapat melayang ialah dengan menggunkan sticky. Sedikit mengulas kembali apabila halaman di scroll hingga kebawah tombol tersebut akan tetap berada diatas atau tombol akan tetap melayang.

DEMO [Eksternal link]

Pada tombol Demo dan Download ini aku kombinasikan dari beberapa arahan CSS . dan Anda juga dapat menambahkan supaya tampilannya dapat lebih menarik. Jika Anda tertarik berikut ini caranya :

Salin arahan dibawah ini, lalu Anda pasangkan sebelum kode ]]></b:skin>

CSS

/*Button Sticky Awesome*/
.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: #ff3918; 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: #319df0; 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 }.demo:before {content: "\f002";font-family: FontAwesome;font-weight: normal;padding: 10px 9px 9px !important;border-radius: 3px 0 0 3px;font-size: 16px;}.download:before {content: "\f0ab";font-family: FontAwesome;font-weight: normal;padding: 10px 9px 9px !important;border-radius: 3px 0 0 3px;font-size: 16px;}.sticky {position: fixed;top: 490px;z-index: 100;border-top: 0;width: 80%;}

Salin arahan dibawah ini dan pastekan pada Entri gres Mode HTML

HTML

<div style="text-align: center;">
<ul class="button sticky">
<li><a class="demo" href="URL Tujuan" target="_blank">Demo</a></li>
<li><a class="download" href="URL Tujuan" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Semoga bermanfaat!

Sumber http://www.websiteedukasi.com/