Button Fade to Icon
.btn {
font-family: sans-serif;
font-weight: 400;
max-width: 240px;
display: block;
height: 65px;
line-height: 65px;
margin: auto;
color: #fff;
position: relative;
border: none;
cursor: pointer;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
&--outline {
border: 3px solid #3884FF;
color: #3884FF;
}
&.btn--slide {
span,
.icon {
display: block;
height: 100%;
text-align: center;
position: absolute;
top: 0;
}
span {
width: 72%;
line-height: inherit;
font-size: 18px;
font-weight: 600;
left: 10px;
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
&:after {
content: '';
width: 2px;
height: 70%;
position: absolute;
top: 15%;
right: -1px;
}
}
.icon {
display: flex;
width: 28%;
right: 10px;
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
.fa {
margin: auto;
font-size: 24px;
vertical-align: middle;
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;
}
}
&:hover {
span {
left: 0;
opacity: 0;
}
.icon {
width: 100%;
right: 0;
}
}
}
}
<!-- Font Awesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<a href="#" class="btn btn--outline btn--slide" role="button">
<span>Learn More</span>
<div class="icon"><i class="fa fa-long-arrow-right"></i></div>
</a>