Alexis ha creado una fórmula para poder realizar botones en tres dimensiones con CSS3 y Compass, una extensión de Ruby, de forma sencilla y rápida. Únicamente hay que seguir estos pasos:

Instalación de la extensión

Cuando hayas descargado la extensión, únicamente será necesario incluirla en el sitio y realizar una referencia a ella:

@import "fancy_3d_buttons";

Configurando las variables

f3d_button(background color, font size, font weight, line height, border radius, border top, border left)[/code]
Como podéis comprobar, existen muchas variables, pueden elegirse las que se deseen.

Para declarar las propiedades del botón, basta con seguir estas reglas, cambiando los valores y propiedades por las que se deseen, claro está:

a.green{
@include f3d_button(#63bb4a);
}
a.blue{
@include f3d_button(#2992DF, 50px, bold, 1.5em, 10px, 2px, 2px);
}


Ejemplo y descarga




Ver ejemplo de su funcionamiento






Descargar el ejemplo de los botones 3D