Tutorial Link Hover I

Hola Mis Blogueritas~ 

como estan? yo estoy muy bien ya que hoy me he dado cuenta que Azumi-chan posteo una entradita rapida y como estoy tan faliz les dare un caramelito a cada una .
Y pasando al tema de lo que trata esta entradita quiero dejarles 3 tipos de link hover y para las que no saben que es link hover les dejo un ejemplo

   

1 asi se ve el link

2 cuando pones la flechita encima del link se cubre de color

 Empezemos:

 

❤ Si usas Blogskin debes pegar el codigo antes de </style>

❤ Para plantilla de diseñador Panel de Control →Modificar Plantilla→ Html 

❤ Ctrl + F o F3 para buscar ]]></b:skin>

❤ y antes del ]]></b:skin> pega el siguiente codigo

Primer Tipo de Link Hover

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;

}

Segundo Tipo de Link Hover

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 #C6D4F3;
padding:2px;
}
a:hover{
color:#fff;
box-shadow:inset 0 -50px 0px #C6D4F3;
}

Tercer Tipo de Link Hover

a:link,a:visited{
-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;
}

Bueno mis blogueritas eso seria todo,nos vemos en otra entradita

bye~