Membuat tombol Sepeti Firefox Pada Blog

gimana nih kabarnya? pasti baik baik aja dong hehe :D oke sesuai judul disini saya akan mengajarkan bagaimana cara membuat tombol firefox seperti gambar di atas di blog oke langsung aja

1. Login Di blogger.com
2. pilih Template lalu Edit Html
3. cari kode ]]></b:skin>
4. copy script dibawah ini tepat diatas kode ]]></b:skin>

Buka Script :

.ff { background-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1)); background-image:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1)); background-image:-ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1)); background-image:-o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1)); background-image:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1)); display:inline-block; vertical-align:middle; margin:2px; font:italic 14px/32px Georgia,Serif; text-align:center; color:white; text-decoration:none; text-shadow:0px 1px 0px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1); box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1); padding:0px 15px 3px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .ff.green {background-color:#82C43A;} .ff.red {background-color:#F5494C;} .ff.blue {background-color:#659AE0;} .ff:hover { background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2)); background-image:-moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2)); background-image:-ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2)); background-image:-o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2)); background-image:linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2)); } .ff:active { position:relative; top:2px; -webkit-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1); box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1); }

5. lalu click save template
6. untuk menggunakan tombol tersebut menggunakan html dibawah ini

Buka Html :

Firefox Beta Take Action Now! Sign me up »

untuk warna hijau pake htmlnya yang ini
<a href="#" class="ff green">Firefox Beta</a>

warna merah :
<a href="#" class="ff red">Take Action Now!</a>


warna biru :
<a href="#" class="ff blue">Sign me up &raquo;</a>