<div class="container">
		
		<ul class="action-bar clearfix">

			<li>
				<a href="#" class="like">
					<span class="zocial-twitter"></span>
					<span class="tooltip">Follow</span>
				</a>
			</li>

			<li>
				<a href="#" class="favourite">
					<span class="zocial-googleplus"></span>
					<span class="tooltip">Circle us</span>
				</a>
			</li>

			<li>
				<a href="#" class="comment">
					<span class="zocial-facebook"></span>
					<span class="tooltip">Like us</span>
				</a>
			</li>

			<li>
				<a href="#" class="share">
					<span class="zocial-pinterest"></span>
					<span class="tooltip">Pin us</span>
				</a>
			</li>

		</ul>

	</div>

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

body {
	background: #ccc;
}

a { text-decoration: none; }

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
	content: "";
	display: table;	
}
.clearfix:after { clear: both; }

.container {
	display: block;
	height: 64px;
	left: 50%;
	margin: -32px 0 0 -128px; /* -(height / 2) & -(width / 2) */
	position: absolute;
	top: 50%;
	width: 256px;
}
/* ---------- Action Bar ---------- */

.action-bar li {
	float: left;
}

.action-bar a {
	-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
	box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
	color: #e7e7e7;
	display: block;
	font-size: 32px;
	height: 64px;
	line-height: 64px;
	position: relative;
	text-align: center;
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-ms-transition: background .3s;
	-o-transition: background .3s;
	transition: background .3s;
	width: 64px;
}

.action-bar a:hover .tooltip {
	margin-top: 16px;
	opacity: 1;
}

.tooltip {
	border-radius: 3px;
	font-size: 14px;
	height: 28px;
	left: 50%;
	line-height: 28px;
	margin: 0 0 0 -50px;
	opacity: 0;
	position: absolute;
	top: 100%;
	-webkit-transition: margin-top .3s, opacity .3s;
	-moz-transition: margin-top .3s, opacity .3s;
	-ms-transition: margin-top .3s, opacity .3s;
	-o-transition: margin-top .3s, opacity .3s;
	transition: margin-top .3s, opacity .3s;
	width: 100px;
}

.tooltip:before {
	content: "";
	height: 8px;
	left: 50%;
	margin: -4px 0 0 -4px;
	position: absolute;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 8px;
}

.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }

.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }

.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }

.share,
.share .tooltip,
.share .tooltip:before { background: #C92228; }
.share:hover { background: #C92228; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.