style.css

.input-file-container {
    position: relative;
    width: 225px;
  } 
  .js .input-file-trigger {
    display: block;
    padding: 14px 45px;
    background: #39D2B4;
    color: #fff;
    font-size: 1em;
    transition: all .4s;
    cursor: pointer;
  }
  .js .input-file {
    position: absolute;
    top: 0; left: 0;
    width: 225px;
    opacity: 0;
    padding: 14px 0;
    cursor: pointer;
  }
  .js .input-file:hover + .input-file-trigger,
  .js .input-file:focus + .input-file-trigger,
  .js .input-file-trigger:hover,
  .js .input-file-trigger:focus {
    background: #34495E;
    color: #39D2B4;
  }
  
  .file-return {
    margin: 0;
  }
  .file-return:not(:empty) {
    margin: 1em 0;
  }
  .js .file-return {
    font-style: italic;
    font-size: .9em;
    font-weight: bold;
  }
  .js .file-return:not(:empty):before {
    content: "Selected file: ";
    font-style: normal;
    font-weight: normal;
  }
  
  /* Useless styles, just for demo styles */
  
  body {
    font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
    color: #7F8C9A;
    background: #FCFDFD;
  }
  h1, h2, h3 {
    margin-bottom: 5px;
    font-weight: normal;
    text-align: center;
    color:#aaa;
  }
  h2 {
    margin: 5px 0 2em;
    color: #1ABC9C;
  }
  h3 a {
    text-decoration: none;
    color: #1ABC9C;
  }
  form {
    width: 225px;
    margin: 0 auto;
    text-align:center;
  }
  h2 + P {
    text-align: center;
  }
  .txtcenter {
    margin-top: 4em;
    font-size: .9em;
    text-align: center;
    color: #aaa;
  }
  .copy {
    margin-top: 2em;
  }
  .copy a {
    text-decoration: none;
    color: #1ABC9C;
  }