Edit in JSFiddle

<div id="footer">
	<div id="shareOn">Share</div>
	<div id="icons">
		<span class="fa fa-google" title="Share on Google!"></span>
		<span class="fa fa-twitter" title="Tweet on Twitter!"></span>
		<span class="fa fa-facebook" title="Share on Facebook!"></span>
	</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Hind:700);
* {
	box-sizing: border-box;
}
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
}
div#footer {
	font-size: 30px;
	background-color: 50px;
	width: 100%;
	height: 150px;
	position: absolute;
	bottom: 0px;
	background-color: #444444;
	color: #eeeeee;
	padding: 20px 100px;
}
div#footer > div#shareOn {
	text-align: center;
	text-transform: uppercase;
	font-family: hind;
	font-weight: 700;
	margin-bottom: 15px;
}
div#icons {
	width: 400px;
	margin: 0 auto;
}
div#icons > span.fa {
	display: inline-block;
	width: calc(100% / 3);
	float: left;
	text-align: center;
	position: relative;
	z-index: 3;
	color: #444444;
	transition: color .5s;
}
div#icons > span.fa::after {
	content: " ";
	background-color: #eeeeee;
	height: 50px;
	width: 50px;
	display: block;
	position: absolute;
	top: -10px;
	left: calc(50% - 25px);
	border-radius: 100px;
	z-index: -1;
	margin-bottom: -20px;
	transition: background-color .3s;
}
div#icons > span.fa:hover::after {
	background-color: #444444;
}
div#icons > span.fa.fa-facebook:hover {
	color: #3b5998;
}
div#icons > span.fa.fa-twitter:hover {
	color: #55acee;
}
div#icons > span.fa.fa-google:hover {
	color: #f44336;
}