Crearemos un boton elegante utilizando propiedades css3 como border-radius, box-shadow, transition, linear-gradient.

El HTML aplicado para este demo sera:

<a href="#" class="button">Boton CSS3</a>

Se ha creado un enlace simple al cual le agregamos el atributo class=”button”

El estilo CSS3

Primero crearemos nuestra clase .button definiendo su estilo basico.

.button{
  background:#e5e5e5;
  display:inline-block;
  margin:0 6px;
  padding:7px 20px 7px;
  color:#333;
  text-decoration:none;
  text-shadow: 0 1px 1px #FFF;
  border:1px solid #ccc;
}

Redondeamos los bordes del boton con border-radius

/* Bordes redondenados - Border Radius */
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;

Ahora modificaremos el fondo(background) con un degradado vertical usando la propiedad css3 linear-gradient

  /* Fondo Degradado - Background Gradient */
  background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
  background: -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
  background: -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
  background: linear-gradient(top, #fefefe, #e5e5e5);

Luego agregamos 3 tipos de sombras a la clase separadas por “,” con box-shadow y rgba para aplicar transparencias.

 /* Aplcamos sombras al boton - Box Shadow */
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
 box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

y para hacer “cool” nuestro boton le agregaremos un efecto de transicion, que se vera al pasar el cursor sobre el boton :hover, con la propiedad css3 transition, con la cual se pueden realizar animaciones.

 /* Animacion - Transition */
 -webkit-transition: all ease-in-out .3s;
 -moz-transition: all ease-in-out .3s;
 transition: all ease-in-out .3s;

Quedando nuestra clase .button

 .button{
    background:#e5e5e5;
    display:inline-block;
    margin:0 6px;
    padding:7px 20px 7px;
    color:#333;
    text-decoration:none;
    text-shadow: 0 1px 1px #FFF;
    border:1px solid #ccc;

    /* Bordes redondenados - Border Radius */
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    /* Fondo Degradado - Background Gradient */
    background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
    background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
    background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
    background:        linear-gradient(top, #fefefe, #e5e5e5);

    /* Aplcamos sombras al boton - Box Shadow */
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

    /* Animacion - Transition */
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

Efecto :hover

Usando la propiedad css :hover(ubicar el cursor sobre un elemento), modificaremos algunas propiedades de la clase .button para darle un efecto elegante.

.button:hover{
  border-color:#adcce2; /* Modificamos el color del borde */

  /* Cambiamos los colores del fondo degradado */
  background:-webkit-linear-gradient(top, #fefefe, #f1f1f1); /* Chrome 10+ */
  background:   -moz-linear-gradient(top, #fefefe, #f1f1f1); /* Firefox 3.6+ */
  background:    -ms-linear-gradient(top, #fefefe, #f1f1f1); /* IE10 */
  background:        linear-gradient(top, #fefefe, #f1f1f1);

  /* Modificamos las propiedades del Box Shadow para un efecto Glow */
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 6px rgba(36, 168, 229, .3);
  -moz-box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
  box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
}

También podemos aplicar esta clase a los elementos de tipo <input /> o <button>