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: