Button Sticky Font Awesome

Button Sticky Font Awesome - Hallo sobat.... pada kesempatan kali ini saya akan berbagi tips cara membuat tombol demo dan Download bisa melayang dan dai percantik dengan font Awesome . Pada prinsipnya tombol tersebut bisa melayang yaitu dengan menggunkan sticky. Sedikit mengulas kembali apabila halaman di scroll sampai kebawah tombol tersebut akan tetap berada diatas atau tombol akan tetap melayang.
Pada tombol Demo dan Download ini saya kombinasikan dari beberapa kode CSS . dan Anda juga bisa menambahkan agar tampilannya bisa lebih menarik. Jika Anda tertarik berikut ini caranya :

Salin kode dibawah ini, kemudian 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 kode dibawah ini dan pastekan pada Entri baru 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>

SELAMAT MENCOBA.... | Jangan lupa berkomentar ya...

Share :

Tweet

✚

Related Post