Micaela 6 de agosto de 2008 a las 18.10
   Imprimir artículo
elWebmaster.com

Botón con efecto 3D para nuestros enlaces


css efecto botonLos 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.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Mauro dice:

    Muy bueno!!!! me gusta mucho,, y es liviano y fácio lo voy a implementar gracias

  2. Diseñador web dice:

    Me viene genial para unos formularios que tengo pendiente de hacer, quise darles un toque especial a los formularios y me parece que este ejemplo es elegante ademas de practico…

    Muchas gracias.
    Saludos, Jose

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder