girlwithbighead
"Keep smiling, because life is a beautiful thing and there's so much to smile about." - Marilyn Monroe { Follow me? }
    footprint


 Tutorial : Link Hover Mine Version  
30/09/2012 | 4 comments


My own coding, don't re-post.

Link Hover Type One  :  example one

a:link,a:visited{
color:#000;
 border-bottom:2px solid #DBB8FF;
-webkit-transition: 0.4s;
 -moz-transition: 0.4s;
text-decoration:none;} 

a:hover{
border-bottom:20px solid transparent;
-webkit-transition: 0.4s;
 -moz-transition: 0.4s;}

Link Hover Type Two  :  example two

a:link,a:visited{ 
border-bottom:2px solid #DBB8FF;
color:pink;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
padding-bottom:0px;} 

a:hover{ 
padding-bottom:12px;
border-bottom:20px solid transparent;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;}

Link Hover Type Three  :  example three

a:link,a:visited{ 
border-bottom:2px solid transparent;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
padding-bottom:18px;} 

a:hover{ 
padding-bottom:2px;
border-bottom:2px solid #DBB8FF;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;}

Link Hover Type Four  :  example four

a:link,a:visited{ 
border-bottom:2px solid #DBB8FF;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
padding-bottom:0px;} 

a:hover{ 
padding-bottom:18px;
border-bottom:2px solid transparent;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;}

Link Hover Type Five  :  example five

a:link,a:visited{ 
line-height: 0%;
color:#000;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;} 

a:hover{ 
background: #DBB8FF;
line-height: 20%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;}



OLDERNEWER