Botón 3D Sencillo con CSS 3

Para comenzar necesitamos crear un boton con las etiquetas de HTML siguiendo el siguiente codigo, tome en cuenta que la clase "button" es la que contendra el codigo CSS para personalizar nuestros botones.

<input type="button" class="button" value="HOLA">

Aquí el codigo CSS:

.button{  
  width: 100px;
  height: 50px;
  border-radius: 20px 20px 20px 20px;
  background-color: #0066ff;
  box-shadow: -5px 5px 5px #666;
  color: #FFF;
}

.button:active{
  width: 100px;
  height: 50px;
  border-radius: 20px 20px 20px 20px;
  background-color: #0066ff;
  box-shadow: 0px 0px 1px #666;
  color: #FFF;
}

Explicacion de las propiedades:

• width: Sirve para definir el ancho del boton.
• height: Sirve para definir el alto del boton.
• border-radius: Caracteristica de CSS 3 que permite crear bordes redondeados, cada valor corresponde a cada una de las esquinas del boton.
• backgroud-color: Sirve para darle un color de fondo al boton.
• box-shadow: Caracteristica de CSS 3 que permite colocar sombras. El 1º y 2º valor representan el desplazamiento horizontal y vertical respectivamente, el 3º valor representa el grado de dispersion del color, el valor seguido de # representa el color de la sombra.
• color: Sirve para definir el color del texto del botón.
• La propiedad ":active" en la clase button, representa el estilo que tendrá el botón al estar activo, es decir al ser pulsado.

Como podemos ver el truco esta en jugar con la propiedad box-shadow del botón, tanto en estado inactivo como en estado activo, reduciendo la sombra en estado activo para dar un efecto de hundimiento; de esta forma se pueden crear botones elegantes con un sencillo efecto 3D de manera bastante simple; en futuros post estaremos elaborando nuevos botones mucho mas elaborados y con características mas resaltantes.

Aquí el Ejemplo: