Botón con efecto 3D para nuestros enlaces

Los enlaces son los elementos más importantes de nuestro sitio ya que sin ellos no habría “hipertexto”. Es por eso que hoy les traigo una técnica bastante sencilla, pero no por eso menos efectiva, para destacarlos.

Esta forma que les voy a enseñar para resaltar los enlaces se basa puramente en CSS, no implica ni hacks ni Javascript. Consiste básicamente en un botón en tres dimensiones que al pasar el mouse por encima nos da la impresión de que está siendo presionado.

Antes que nada necesitamos un vínculo con un span anidado.

En el mismo, los bordes superior e izquierdo son iluminados mientras que el derecho y el inferior se ven ensombrecidos y al pasar el mouse por arriba se invertirán estas propiedades.

Para añadir más sombra le agregaremos borde derecho e inferior al span.

Cambiar los bordes hará que se desplace el span un píxel hacia abajo y hacia la derecha.

El html sería así:

<a href="#" class="button"><span>Roll over here</span></a>

Y el CSS así:

a.button{ float:left;

font-size:110%;

font-weight:bold;

border-top:1px solid #999;

border-left:1px solid #999;

border-right:1px solid #333;

border-bottom:1px solid #333;

color:#333;

width:auto;

}

a.button:hover{

border-top:1px solid #333;

border-left:1px solid #333;

border-right:1px solid #999;

border-bottom:1px solid #999;

color:#333;

}

a.button span{

background:#d4d0c8 url(images/bg_btn.gif) repeat-x;

float:left;

line-height:24px;

height:24px;

padding:0 10px;

border-right:1px solid #777;

border-bottom:1px solid #777;

}

a.button:hover span{

border:none;

border-top:1px solid #777;

border-left:1px solid #777;

background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;

cursor:pointer;

}

Espero que lo pongan en práctica porque es algo muy rápido de implementar que queda muy vistoso y elegante. Haz clic aquí para ver un ejemplo.

Fuente: Css Globe.