Enlaces con líneas en movimiento


Ya sabemos que podemos personalizar los vínculos dándole atributos de color, decoración, fondo, etc. Así que partiendo de la misma idea podemos ponerle a los enlaces líneas animadas que aparezcan cuando pasa el cursor encima de ellos.



Para que sepas de qué hablo pasa el cursor sobre los siguientes enlaces y mira el efecto:


Para darle este efecto a tus vínculos entra a Diseño > Edición de HTML y busca esta línea:

a:hover {


Abajo de ella pega cualquiera de estos códigos:



text-decoration:none;


background:url(http://img233.imageshack.us/img233/5403/linearrow.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

text-decoration:none;


background:url(http://img694.imageshack.us/img694/2616/linearrow2.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

text-decoration:none;


background:url(http://img35.imageshack.us/img35/8056/linearrow3.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

text-decoration:none;


background:url(http://img35.imageshack.us/img35/1221/linepoints.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 5px;

text-decoration:none;


background:url(http://img233.imageshack.us/img233/1752/lineyellow.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;



Si sientes que la línea animada está muy encima del texto puedes modificar padding-bottom: 3px; por otro número, por ejemplo 5px


Así de simple puedes darle a tus enlaces un estilo diferente al pasar el mouse.


Fuente: Ciudadblogger

0 comentarios:

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika