<div class="button">
  Read Post
  <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i>
</div>

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400);

$white: #fff;
$green: #55593e;

body{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $green;
  background-size: cover;
  font-family: 'Ubuntu', sans-serif;
  
  .button{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    color: $white;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 10px 15px 10px 15px;
    border: 1px solid $white;
    transform: translate(-50%, -50%);
    
    i{
      -webkit-animation: arrow-animation 1.5s;
      -moz-animation: arrow-animation 1.5s;
      animation-iteration-count: 3;
    }
    i:first-child{
      -webkit-animation-delay: .2s;
        -moz-animation-delay: .2s;
      margin-left: 5px;
      opacity: 0.15;
    }
    i + i{
      -webkit-animation-delay: .4s;
      -moz-animation-delay: .4s;
      opacity: 0.5;
    }
    i + i + i{
      -webkit-animation-delay: .6s;
      -moz-animation-delay: .6s;
      opacity: 1;
    }
    
    &:hover{
      cursor: pointer;
      color: $green;
      background-color: $white;
      
      i{
        -webkit-animation: arrow-animation 2s;
        -moz-animation: arrow-animation 2s;
        animation-iteration-count: 1;
      }
    }
  }
}

@-webkit-keyframes arrow-animation {

  0%   { opacity: .15;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes arrow-animation {

  0%   { opacity: .15; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes arrow-animation {

  0%   { opacity: .15; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes arrow-animation {

  0%   { opacity: .15; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}