<button class="cart-button">
	<span class="add-to-cart">Add to cart</span>
	<span class="added">Added</span>
	<i class="fas fa-shopping-cart"></i>
	<i class="fas fa-box"></i>
</button>

<a class="youtube-link" href="https://youtu.be/BVdTKEi269Y" target="_blank">https://youtu.be/BVdTKEi269Y</a>
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ebe8ff;
}

.cart-button {
	position: relative;
	padding: 10px;
	width: 200px;
	height: 60px;
	border: 0;
	border-radius: 10px;
	background-color: #4834d4;
	outline: none;
	cursor: pointer;
	color: #fff;
	transition: .3s ease-in-out;
	overflow: hidden;
}
.cart-button:hover {
	background-color: #35269b;
}
.cart-button:active {
	transform: scale(.9);
}

.cart-button .fa-shopping-cart {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: -10%;
	font-size: 2em;
	transform: translate(-50%,-50%);
}
.cart-button .fa-box {
	position: absolute;
	z-index: 3;
	top: -20%;
	left: 52%;
	font-size: 1.2em;
	transform: translate(-50%,-50%);
}
.cart-button span {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	font-size: 1.2em;
	color: #fff;
	transform: translate(-50%,-50%);
}
.cart-button span.add-to-cart {
	opacity: 1;
}
.cart-button span.added {
	opacity: 0;
}

.cart-button.clicked .fa-shopping-cart {
	animation: cart 1.5s ease-in-out forwards;
}
.cart-button.clicked .fa-box {
	animation: box 1.5s ease-in-out forwards;
}
.cart-button.clicked span.add-to-cart {
	animation: txt1 1.5s ease-in-out forwards;
}
.cart-button.clicked span.added {
	animation: txt2 1.5s ease-in-out forwards;
}
@keyframes cart {
	0% {
		left: -10%;
	}
	40%, 60% {
		left: 50%;
	}
	100% {
		left: 110%;
	}
}
@keyframes box {
	0%, 40% {
		top: -20%;
	}
	60% {
		top: 40%;
		left: 52%;
	}
	100% {
		top: 40%;
		left: 112%;
	}
}
@keyframes txt1 {
	0% {
		opacity: 1;
	}
	20%, 100% {
		opacity: 0;
	}
}
@keyframes txt2 {
	0%, 80% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.youtube-link {
	position: fixed;
	left: 20px;
	bottom: 20px;
	color: #000;
	text-decoration: none;
	font-size: 12px;
}
const cartButtons = document.querySelectorAll('.cart-button');

cartButtons.forEach(button => {
	button.addEventListener('click', cartClick);
});

function cartClick() {
	let button = this;
	button.classList.add('clicked');
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.