UN LINK CON ESTYLO

• BLOGOTECA

• NOTAS DE CAMPO ÍNTIMAS

• DEJAME UN POEMA

• VUESTROS POEMAS

¿Qué os parece esta forma de presentar los link? pues el codigo que hace posible esto:

CLICK AQUÍ

<style>
ul.animatedbgul{
margin: 0;
padding: 0;
list-style: none;
} ul.animatedbgul li{
width: 100%;
clear:left;
overflow: hidden;
} ul.animatedbgul li span{ display: block; float: left;
min-width: 0px;
margin-bottom: 5px;
padding: 8px;
color: #0F4652; /* COLOR DE LA LETRA ANTES DE PASAR EL RATON */
} ul.animatedbgul li:hover span{
color: #fff;
background: #0F4652; /* COLOR DEL MARCADO */
border-left: 48px solid darkred; /* ANCHO DEL BORDER DEL MARCADO Y SU COLOR BUSCAR EN COLORES CSS*/
min-width: 200px; /* LARGO DEL MARCADO */
-webkit-box-shadow: 0 0 5px gray;
-moz-box-shadow: 0 0 5px gray;
box-shadow: 0 0 5px gray;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
} </style>

<ul class="animatedbgul"> <li><a href="URL DEL ENLACE" target="blank"><span><H3>NOMBRE DEL ENLACE</span></H3></a></li> </ul>

ACLARACIÓN

Si queréis seguir agregando link solo tendréis que abrir un nuevo "li" al final de este código, antes del "/ul" y cerrarlo después. Este estupendo efecto lo encontré en uno de mis lugares favoritos para manejar código CSS