Post

Tuto

Free

BG
Afiqah Junizan

Tutorial : Link Hover Mine Version (ii)
09/10/2012 | 2 comments

My own coding, don't re-post.

Link Hover Type One  :  example one

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
text-decoration:overline;}

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:underline;}

Link Hover Type Two  :  example two

a:link,a:visited{
text-decoration:none;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
border-bottom:5px groove transparent;}

a:hover{
text-decoration:none;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
border-bottom:5px groove #aaa;}

Link Hover Type Three  :  example three

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

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:none;
border-bottom:10px dashed transparent;}

Link Hover Type Four  :  example four

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:none;
color:pink;
border-bottom:1px dashed #000;
border-radius:10px;
padding:5px 10px 2px 10px;}

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:none;
border-bottom:1px dotted #000;
padding:5px 10px 2px 10px;}

Link Hover Type Five  :  example five

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:none;
color:pink;
background:transparent;
padding-top:8px;
padding-bottom:34px;}

a:hover{
text-decoration:none;
background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) no-repeat right bottom;
padding-top:8px;
padding-bottom:1px;}

Link Hover Type Six  :  example six

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
text-decoration:none;}

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
background:url(http://media.tumblr.com/tumblr_lnvuybv4MQ1qepbs7.gif) no-repeat left top;
padding-left:20px;}

Link Hover Type Seven  :  example seven

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:none;
color:pink;
background:transparent;
padding-top:8px;
padding-bottom:12px;}

a:hover{
text-decoration:none;
background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) repeat right top;
padding-top:8px;
padding-bottom:10px;}

Link Hover Type Eight  :  example eight

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
text-decoration:none;
background:transparent;
padding-top:8px;
padding-bottom:12px;}

a:hover{
text-decoration:none;
background:url(http://1.bp.blogspot.com/-htar_GuUrns/TnnJBIk9Q_I/AAAAAAAABo4/SyjesaWuutU/s1600/blueunderline.png) repeat right bottom;
padding-top:8px;
padding-bottom:8px;}

Link Hover Type Nine  :  example nine

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
text-decoration:none;
padding:5px;}

a:hover{
text-decoration:none;
background:url(http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif) repeat ;}

Link Hover Type Ten  :  example ten

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

a:hover{
text-decoration:none;
background:pink;}

Credit background : kak una yang omeyyyyy
OLDERNEWER