<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;
		}
	}
}
View Compiled
//included Font Awesome through JS
//Update: You can now have multiple line button without it looking wonky!
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://use.fontawesome.com/ff9a5d262d.js