<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; }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.