Tutorial : Round Hover With Shadow

assalamualaikum. hari ni nak buat tuto. hehe. atas permintaan kawan. act, kalau nak tgk round hover ni boleh lah hulur cursor dkt button follow. haaa, melengkung kan? itulah round hover. tapi kali ni ada shadow. so, follow the steps! ( tapi yg ni berdasarkan template baharu)
1. dasboard - template - edit html
2. then tekan ctrl + f search kod bawah ni :

/* Header

3. dah jumpa? then paste kod bawah ni ATAS kod /*Header

 /*------ IMAGE ANIMATION------*/
img {filter:alpha(opacity=100);
-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#FF3366; border-radius: 50px; -moz-border-radius: 50px;}
-moz-opacity:1.0;
opacity:1.0;
}
img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:.80;
}
u {
text-decoration:underline;
border-bottom: 2px dotted #ff0080;
padding: 0px;
}

4. tukar kod colour yg yasmin highlight tu eh. kalau tk nak shadow boleh letak kod putih. tekan utk kod colour .

5. preview sebelum save takut tak jadi. dh jadi? jgn lupa comment! bye :)

---

♥ Thanks For Reading This Entry ♥

---