Membuat efek Tombol pada MP kita

Coba geser Mouse atau klik Link di bawah ini

Disini

Kita akan dapat menemui bentuk seperti tombol. Yang ketika didekati oleh mouse Link tersebut akan tampak timbul seperti tombol, dan akan tenggelam ketika ditekan (klik). Hal tersebut dilakukan dengan teknik : Jika normal akan menampilkan keadaan tertentu (a:link, a:visited) dan juga keadaan mouse tergeser akan menampilkan keadaan tombol masuk (a:hover) dan ketika aktif menampilkan efek tenggelam (a:active)

Keadaan Normal:

Seperti ini


Dengan kode kira kira seperti demikian:

display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#336633;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width:120px;
height:20px;
text-align:center;
padding:4px;
text-decoration:none;

Keadaan mouse digeser:

Seperti ini

Dengan cara memberikan border kanan dan bawah sebagai efek timbul.

Kode utamanya antara lain seperti berikut

display:block;
width:118px;
height:18px;
background-color:#336633;
border-right:2px solid #003300;
border-bottom:2px solid #003300;
border-left:0px solid #003300;
border-top:0px solid #003300;

Keadaan mouse ditekan:

Seperti ini

Dengan cara memberikan border kiri dan atas sebagai efek tenggelam


Kode utamanya kira-kira seperti demikian:

display:block;
width:118px;
height:18px;
background-color:#336633;
border-left:2px solid #003300;
border-top:2px solid #003300;
border-right:0px solid #003300;
border-bottom:0px solid #003300;

Nah, selanjutnya kita meletakkan tanda tersebut pada Custom-CSS MP kita di http://multiply.com/setup/pages/upload-css, dimana saya menambahkan satu class baru bernama tombol. Dimana semua a yang akan saya kenai efek tersebut saya beri nama class tombol. Penggunaannya adalah dengan meletakkan class pada LINK <a href=""...></a>, yang biasa kita buat. Dengan catatan, semua dilakukan pada mode Edit HTML.

Kode yang saya tambahkan pada custom CSS adalah:

a.tombol {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#336633;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width:120px;
height:20px;
text-align:center;
padding:4px;
text-decoration:none;
}

a.tombol:link, a.tombol:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#336633;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width:120px;
height:20px;
text-align:center;
padding:4px;
text-decoration:none;
}

a.tombol:hover {
display:block;
width:118px;
height:18px;
background-color:#336633;
border-right:2px solid #003300;
border-bottom:2px solid #003300;
border-left:0px solid #003300;
border-top:0px solid #003300;
}

a.tombol:active {
display:block;
width:118px;
height:18px;
background-color:#336633;
border-left:2px solid #003300;
border-top:2px solid #003300;
border-right:0px solid #003300;
border-bottom:0px solid #003300;
}

Dan selanjutnya tinggal meletakkan tanda seperti contoh di bawah ini:

<a class="tombol" href="http://alamatlink">LINK</a>

Hasilnya:

LINK



Lumayan bisa menghibur sakit kepala hebat sebelah kiri :(


SELAMAT MENCOBA