Membuat tombol, button download jadi lebih gaya

He he hei dah lama ga posting nih, kangen juga pengen posting kira-kira poasting apa yah!! hmm saya tahu gimana kalau cara membuat tombol atau button download atau demo anda jadi lebih gaya dan keren.

Gi mana?? mau oke let's go..

Nah trik dan tips berikut sangat cocok di terapkan untuk blog - blogspot anda yang berhubungan dengan download, baik template, sofeware, lagu, film atau apaupun yang berhubungan langsung dengan download mendownload, supaya penampilan blog anda jadi gi mana gitu (he he he).

Untuk sample button yang sudah jadi anda bisa melihat di : http://kontak07.blogspot.com/2012/02/sample-tombol-button-css.html

Seep cukup sederhana sebenarnya kita hanya memanfaatkan html sederhana dan pengaturan css yang sederhana pula.

caranya :
Login ke dasbor blogger kamu
KLIK template --- Edit Html --- Lanjutkan

cari kode : ]]></b:skin>

dan copy paste kode style css di bawah ini tepat di atas kode ]]></b:skin>

/* download button */
.download { -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:arial; font-size:16px; font-weight:bold; padding:11px 30px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; }

.download:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5; }

.download:active { position:relative; top:1px; }

/* demo button */
.demo { -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1; -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1; box-shadow:inset 0px 1px 0px 0px #fce2c1; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25'); background-color:#ffc477; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #eeb44f; display:inline-block; color:#ffffff; font-family:arial; font-size:16px; font-weight:bold; padding:11px 50px; text-decoration:none; text-shadow:1px 1px 0px #cc9f52; }

.demo:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); background-color:#fb9e25; }

.demo:active { position:relative; top:1px; }

Sudah kemudian save / simpan template anda.

Sekarang buat postingan baru. Perhatikan pada tab HTML (ingat bukan Tab Compose yap! ingat..ingat he he he!!)

Buat link dengan pengaturan class css dengan memanggil fungsi link dan css yang telah kita buat sebelumnya :


<a href="#" class="demo">demo</a>
<a href="#" class="download">download</a>

Ganti # dengan link dari demo atau link download tujuan anda, beres dan terbitkan entri.

Kamu juga bisa membuat sendiri tombol atau button sesuai dengan style anda sendiri silahkan gunakan css button generator untuk mempermudah. Silahkan ngacir aja langsung ke www.cssbuttongenerator.com

Seep selamat mencoba.. salam

ilustrasi gambar download Paket ikon: Litho System, Desainer : Anthony Piraino