CSSBlog ES – ¡CSS 100%! -

Algunas veces queremos destacar los enlaces de otra manera, indicando una imagen de fondo que acompañe a ese enlace, para indicar por ejemplo, que es un enlace externo.

Una manera sencilla de hacerlo es aplicarle una clase al enlace, para ello debemos indicar este código CSS:

<style type="text/css">
#exp_content {
margin : auto;
text-align : left;
padding : 15px 40px 10px 4%;
height : auto;
font-size : 0.9em;
color : #000;
}

#clb {
width : 70%;
margin : auto;
padding : 40px 0;
color : #666;
}

#clb h2, #clb p {
margin-bottom : 20px;
}

#clb h2 {
color : #669900;
}

#clb a, #clb a.ex {
color : #669900;
white-space : nowrap; /* Para IE6 */
}

#clb a.ex {
padding-right : 15px;
background : #fff url(images/clb-link.jpg) no-repeat bottom right;
}

#clb a:hover, #clb a:focus, #clb a:active, #clb a.ex:hover, #clb a.ex:focus, #clb a.ex:active {
color : #000;
text-decoration : none;
}

#clb a.ex:hover, #clb a.ex:focus, #clb a.ex:active {
background : #fff url(images/clb-link-over.jpg) no-repeat bottom right;
}

#clb a:focus, #clb a:active {
background-color : #ffffdd;
}

#clb a.ex:focus, #clb a.ex:active {
background : #ffffdd url(images/clb-link-on.jpg) no-repeat bottom right;
}

#clb p.offset {
position : absolute;
top : -9000px;
left : -9000px;
}

</style>

Eso sí, las imágenes de fondo deberemos crearlas y subirlas a nuestro servidor. Por defecto se muestran estas (súbela a tu servidor en el directorio “images/” por defecto):

Descargar imágenes. (1 para el estado normal, otra para active, y otra para on).

El código HTML a añadir es este:

<p>Mi párrafo <a class="ex" href="http://www.tuenlace.com" title="Enlace externo">Tu enlace</a></p>

Es decir, lo que hemos hecho es añadir a la etiqueta del enlace “<a>” la clase ex, simplemente eso.

Con esto ya tendríamos listo nuestro enlace con fondo, podemos ver un ejemplo de su funcionamiento.