Post

Tuto

Free

BG
Afiqah Junizan

Tutorial : Link Hover Mine Version (iii)
09/10/2012 | 10 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:none;
padding:2px;}

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:none;
-webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image:-webkit-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
background-image:-moz-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
background-image:-ms-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
background-image:-o-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);}

Link Hover Type Two  :  example two

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

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:none;
color: white;
background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image:-webkit-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
background-image:-moz-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
background-image:-ms-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);
background-image:-o-linear-gradient(left, #FF0000, #FA5858, #73a6df, #9085fb, #52ca79);}

Link Hover Type Three  :  example three

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
text-decoration:none;
padding:4px;
border-radius: 10px 0px 10px 0px;}

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
text-decoration:none;
background:#000;}

Link Hover Type Four  :  example four

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

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
border-top:2px solid pink;
border-bottom:2px solid pink;
text-decoration:none;}

Link Hover Type Five  :  example five

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

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
border-right:2px solid pink;
border-left:2px solid pink;
text-decoration:none;}

Link Hover Type Six  :  example six

a:link,a:visited{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
text-decoration:none;
padding:4px;
background:transparent;
box-shadow: inset 0px 0 0px 0 brown;}

a:hover{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
overflow:hidden;
box-shadow: inset 200px 0 0px 0 brown;
text-decoration:none;}

Link Hover Type Seven  :  example seven

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;
text-shadow:100px 0px 0px #333333;
text-decoration:none;}

Link Hover Type Eight  :  example eight

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;
text-shadow:10px 10px 1px #333333;
text-decoration:none;}

Link Hover Type Nine  :  example nine

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;
text-shadow:0px -10px 1px #333333;
text-decoration:none;}

Link Hover Type Ten  :  example ten

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;
text-shadow:-1px 0px 9px #333333;
text-decoration:none;}
OLDERNEWER