UN LINK CON ESTYLO

Widgets cortesia de  Tecnica Blogger

EL CÓDIGO▼

<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> <!-- COMIENZA EL HTML--> <ul class="animatedbgul"> <li><a href="URL DEL ENLACE" target="blank"><span><H3>NOMBRE DEL ENLACE</H3></span></a></li> </ul>