<section>
<a href="#" class="btn">
<span class="btn-content">Call To Action</span>
<span class="icon"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</a>
<a href="#" class="btn btn-remove btn-alt-color">
<span class="btn-content">Remove</span>
<span class="icon"><i class="fa fa-times" aria-hidden="true"></i></span>
</a>
<hr />
<a href="#" class="btn">
<span class="btn-content">This is a Long Call to Action<br> with a Line Break</span>
<span class="icon"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</a>
</section>$btn-color: #009CD0;
$btn-alt-color: salmon;
.btn {
border-radius: 4px;
border: 2px solid $btn-color;
color: $btn-color;
display: inline-block;
margin: 0 .25em;
overflow: hidden;
padding: 24px 60px 24px 16px;
position: relative;
text-decoration: none;
line-height: 1;
.btn-content {
font-size: 1em;
line-height: 1.2;
padding: 0 26px;
position: relative;
right: 0;
transition: right 300ms ease;
display: block;
text-align: left;
}
.icon {
border-left: 1px solid $btn-color;
position: absolute;
right: 0;
text-align: center;
top: 50%;
transition: all 300ms ease;
transform: translateY(-50%);
width: 58px;
height: 70%;
i {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: $btn-color;
opacity: 0;
transition: opacity 300ms ease;
}
&:hover {
.btn-content {
right: 100%;
}
.icon {
border-left: 0;
font-size: 1.8em;
width: 100%;
}
&:after {
opacity: .2;
}
}
&.btn-alt-color {
border-color: $btn-alt-color;
color: $btn-alt-color;
.icon {
border-left-color: $btn-alt-color;
}
&:after {
background-color: $btn-alt-color;
}
}
}//included Font Awesome through JS
//Update: You can now have multiple line button without it looking wonky!
External CSS
This Pen doesn't use any external CSS resources.