file upload btn snippet

index.html

<!-- The fileinput-button span is used to style the file input field as button -->
<button class="btn btn-default btn-lg upload-btn fileinput-button">
  <span>Upload More Files</span>
  <!-- The file input field used as target for the file upload widget -->
  <input id="fileupload" type="file" name="files[]" multiple>
</button>

upload-btn.less

// file upload btn styles
.upload-btn {
  position: relative;
  overflow: hidden;

  > input {
    cursor: pointer;
    direction: ltr;
    filter: alpha(opacity=0);
    font-size: 60px;    // height of the button
    margin: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transform: translate(-300px, 0) scale(4);
    top: 0;
    width: 100%;      // take up the entire width of the button
  }
}