<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
This Pen doesn't use any external JavaScript resources.