tutorial - link hover part 5


Contoh:

Welcome to aien story.


1. Dashboard - Design - Edit html - Tick expand widget template

2. Search this: a:link,a:visited{

3. Copy code bawah ni dan pastekan di BAWAH code a:link,a:visited{

text-decoration:none;
color:#aaa;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
box-shadow:inset 0 0px 0px #FFA4A4;
padding:2px;
}
a:hover{
color:#fff;
box-shadow:inset 0 50px 8px #FFA4A4;
}
Contoh:



Arahan sama macam kat atas cuma guna code bawah ni.
text-decoration:none;
color:#aaa;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
box-shadow:inset 0 0px 0px #C6D4F3;
padding:2px;
}
a:hover{
color:#fff;
box-shadow:inset 0 -50px 0px #C6D4F3;
}
Contoh:


Arahan sama macam kat atas cuma guna code bawah ni.
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
text-decoration:none;
box-shadow:inset 0px 0px 0px #FEA5A5,inset 0px 0px 0px #FAC3BA;
color:#888;
padding:2px;
}
a:hover{
box-shadow:inset 0px 14px 0px #FEA5A5,inset 0px -14px 0px #FAC3BA;
color:#fff;
}

merah - warna boleh tukar. Its up to you.

SAVE! Kalau ada apa-apa boleh tanya k.

THANKS FOR READING THIS :) LIKE IF YOU LIKE ♥