Material icons

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 <button class="btn btn-primary">
   <i class="material-icons">face</i>
   <span>Face</span>
 </button>

CSS

button{
  position: relative;
  transition: all .6s linear
}

i {
  color: #FFF;
  font-size: 34px !important; /* 24px preferred icon size */
  vertical-align: middle;
  transition: transform .6s linear;
}

span {
  position: absolute;
  top: -45px;
  left: 14px;
  transition: top .6s linear;
}

button:hover > i {
    transform: translate3d(0px, 45px, 0px);
}

button:hover > span {
    top: 12px; 
}