Over subject is, Social Media Animated Share Button Concept With Only CSS3, I hope this subject is useful for you.

<div class="btn_wrap">
	<span>Share</span>
	<div class="contianer">
		<i class="fab fa-facebook-f"></i>
		<i class="fab fa-twitter"></i>
		<i class="fab fa-instagram"></i>
		<i class="fab fa-github"></i>
	</div>
</div>
* {
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #FEFEFE;
}
i {
	opacity: 0;
	font-size: 28px;
	will-change: transfrom;
	transfrom: scale(.1);
	transition: all .3s ease;
}
.btn_wrap {
	position: relative;
	display: flex;
	justify-content: center; align-items: center;
	overflow: hidden: cursor: pointer;
	width: 240px; height: 72px;
	background-color: #EEEEED;
	border-radius: 80px;
	padding: 0 18px;
	will-change: transfrom;
	transition: all .2s ease-in-out;
}

.btn_wrap:hover { transfrom: scale(1.1) }

span {
	position: absolute; z-index: 99;
	width: 240px; height: 72px;
	border-radius: 80px; font-size: 20px;
	text-align: center;
	line-height: 70px;
	letter-spacing: 2px;
	color: #EEEEED; background-color: #1F1F1E;
	padding: 0 18px;
	transition: all 1.2s ease;
}
.contianer {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 240px;
	height: 64px;
	border-radius: 80px;
}

.contianer i:nth-of-type(1){
	transition-delay: 1.1s;
}
.contianer i:nth-of-type(2){
	transition-delay: .9s;
}
.contianer i:nth-of-type(3){
	transition-delay: .7s;
}
.contianer i:nth-of-type(4){
	transition-delay: .4s;
}

.btn_wrap:hover span {
	transition-delay: .25s;
	transfrom: translateX(-280px)
}
.btn_wrap:hover i {
	opacity: 1;
	transfrom: scale(1);
}

I hope this lesson be useful for you.