File input button

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container mt-4">
      
      <h3 class="mt-4">Normal sized button</h3>
      <div class="btn btn-primary btn-file">
        <input type="file" />
        Upload a file
      </div>
      
      <h3 class="mt-4">Large sized button</h3>
      <div class="btn btn-primary btn-lg btn-file">
        <input type="file" />
        Upload a file
      </div>
      
      <h3 class="mt-4">Block sized button</h3>
      <div class="btn btn-primary btn-block btn-file">
        <input type="file" />
        Upload a file
      </div>
      
    </div>
  </body>

</html>

.btn-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-file input {
  position: absolute;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  opacity: 0;
  top: 0;
  right: 0;
  transform: translate(-100%, 0) scale(3);
  direction: ltr;
  cursor: pointer;
}

/* Hack for forcing webkit to show a cursor all the time */
.btn-file input::-webkit-file-upload-button {
  cursor: pointer;
}