Dar estilos a un input file

Es muy sencillo dar estilos a un boton en HTML usando estilos, Bootstrap o algun otro framework de CSS, seria algo como:

<button type="button" class="btn btn-default">Soy un boton</button>

Pero las cosas cambian al tener un input del tipo file , pues este genera automaticamente un boton que no es muy bonito y tiende a ser diferente en cada plataforma o navegador.

Este problema se resuelve de muchas formas ya sea usando javascript,css o alguna libreria (http://whatknownsense.blogspot.mx/).

En mi caso yo usare css y nada mas:

• Primero agregamos el boton con su respectivo label y ocultamos el boton.

    <label for="archivo" class="upload-button">Subir archivo</label>
    <input id="archivo" name="archivo" type="file" style="display:none" />
  

• Despues agregamos estilos al label

    .upload-button{
    	//TODO
    }
    
    .upload-button:hover{
    //TODO	
    }
  

• Al final el resultado quedaria muy similar a esto:

Simple!.

Fuentes:

• Stackoverflow

• Tympanus