<div class="wrap">
  <a href="#">
    Tweet <span>1189</span>
  </a>
</div>

 body {
   background: #000;
   font-family: 'Lato', sans-serif;
 }
 
 .wrap {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
 
 a {
   display: inline-block;
   overflow: hidden;
   position: relative;
   width: 100px;
   height: 60px;
   line-height: 60px;
   margin: 0 10px;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   color: #FFF;
   border: 2px solid #FFF;
   border-radius: 4px;
   font-weight: 600;
   span {
     display: block;
     position: absolute;
     left: 0;
     top: -60px;
     height: 100%;
     width: 100%;
     float: left;
     margin: 0;
     transition: all .5s;
     line-height: 60px;
     color: rgba(255, 255, 255, 0.5);
     background-color: #00aced;
   }
   &:hover span {
     top: 0px;
   }
 }