Sunday, July 14, 2013

Tutorial : List With Icon Hover

Late Night Discoveries | via Tumblr

こんにちは, 안녕하세요 , Assalamualaikum. 
Maaf ye pada yang req tuto ni. Atin punye komputer problem so tak dapat nk buat huhu. Ok untuk hari ni atin akan bagi korang tutor list yang ada icon punye. Ala macam atin penah pakai kan? hihi.. untuk yang ini atin punye lain kot dari tutor2 , sebab yang ini die terus sambung sebelah bulan ke bawah so jgn kompius k. hihi.Hover die akan tukar icon .

CLICK TO PREVIEW

 Copy code di bawah ni
<style>
a.chan {
background:url(URL ICON);
background-repeat:no-repeat;
background-size:12px;
padding-left:19px;
color:#666;
display:inline-block;
font: 12px arial;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
width:280px;
line-height:18px;
}
a.chan:hover{
background:url(URL ICON);
background-repeat:no-repeat;
background-size:12px;
color: #000;
}
</style>
<a class="chan" href="LINK HERE">Tutorial</a>
<a class="chan" href="LINK HERE">Tutorial</a>
<a class="chan" href="LINK HERE">Tutorial</a>
<a class="chan" href="LINK HERE">Tutorial</a>
<a class="chan" href="LINK HERE">Tutorial</a>
<a class="chan" href="LINK HERE">Tutorial</a>

 Paste dekat mana-mana korang nak
 Preview & Save

oren : URL icon
merah : link web
ungu : tittle list





No comments: