<div class="wrapper">
  <div class="file-upload">
    <input type="file" />
    <i class="fa fa-arrow-up"></i>
  </div>
</div>
html{
  height:100%;
}

body{
  
  background-color:#2590EB;
  height:100%;
}

.wrapper{
  
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  

  .file-upload{

    height:200px;
    width:200px;
    border-radius: 100px;
    position:relative;
    
    display:flex;
    justify-content:center;
    align-items: center;  

    border:4px solid #FFFFFF;
    overflow:hidden;
    background-image: linear-gradient(to bottom, #2590EB 50%, #FFFFFF 50%);
    background-size: 100% 200%;
    transition: all 1s;
    color: #FFFFFF;
    font-size:100px;

    input[type='file']{

      height:200px;
      width:200px;
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      cursor:pointer;

    }

    &:hover{

      background-position: 0 -100%;

      color:#2590EB;

    }


  }
}


View Compiled
/*
  A styled file input.
  by @ste_baker

*/
Run Pen

External CSS

  1. //netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css

External JavaScript

This Pen doesn't use any external JavaScript resources.