<div class="btn-container">
	<button>
		<span class="text">Hover</span>
		<div class="icon-container">
			<div class="icon icon--left">
				<svg>
					<use xlink:href="#arrow-right"></use>
				</svg>
			</div>
			<div class="icon icon--right">
				<svg>
					<use xlink:href="#arrow-right"></use>
				</svg>
			</div>
		</div>
	</button>
</div>

<div class="btn-container">
	<button>
		<span class="text">Hover</span>
		<div class="icon-container">
			<div class="icon icon--left">
				<svg>
					<use xlink:href="#arrow-right"></use>
				</svg>
			</div>
			<div class="icon icon--right">
				<svg>
					<use xlink:href="#arrow-right"></use>
				</svg>
			</div>
		</div>
	</button>
</div>

<svg style="display: none;">
	<symbol id="arrow-right" viewBox="0 0 20 10">
		<path d="M14.84 0l-1.08 1.06 3.3 3.2H0v1.49h17.05l-3.3 3.2L14.84 10 20 5l-5.16-5z"></path>
	</symbol>
</svg>

<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100vh;
	display: flex;
	overflow: hidden;
}

.btn-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--bg);

	&:nth-child(1) {
		--btn-bg: #da0000;
		--bg: #f22c3a;
	}
	&:nth-child(2) {
		--btn-bg: #fac300;
		--bg: #fc6100;
	}
}

button {
	--width: 180px;
	--height: 60px;
	border: 0;
	position: relative;
	min-width: var(--width);
	min-height: var(--height);
	border-radius: var(--height);
	color: #fff;
	font-family: "Montserrat";
	font-weight: bold;
	background: rgba(0, 0, 0, 0.3);
	cursor: pointer;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 1rem;

	.text,
	.icon-container {
		position: relative;
		z-index: 2;
	}

	.icon-container {
		--icon-size: 25px;
		position: relative;
		width: var(--icon-size);
		height: var(--icon-size);
		margin-left: 15px;
		transition: transform 500ms ease;

		.icon {
			position: absolute;
			left: 0;
			top: 0;
			width: var(--icon-size);
			height: var(--icon-size);
			transition: transform 500ms ease, opacity 250ms ease;

			&--left {
				transform: translateX(-200%);
				opacity: 0;
			}

			svg {
				width: 100%;
				height: 100%;
				fill: #fff;
			}
		}
	}

	&::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: var(--btn-bg);
		border-radius: var(--height);
		z-index: 1;
		transition: transform 500ms ease;
	}

	&:hover {
		&::after {
			transform: translateX(65%);
		}

		.icon-container {
			transform: translateX(125%);
			.icon {
				&--left {
					transform: translateX(0);
					opacity: 1;
				}
				&--right {
					transform: translateX(200%);
					opacity: 0;
				}
			}
		}
	}
}

.support{
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a{
		margin: 0 10px;
		color: #fff;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover{
			transform: scale(1.1);
		}
	}

}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css
  2. https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js