<button>
 	<a href="#"><div class="twitter">
 		<p>Twitter</p>
 	</div></a>
 	<a href="#"><div class="dribbble">
 		<p>Dribbble</p>
 	</div></a>
 	<a href="#"><div class="rdio">
 		<p>Rdio</p>
 	</div></a>
 </button>
* {
	padding:0;
	margin:0;
	-webkit-font-smoothing: antialiased;
}
body {
	margin:0 auto;
	padding-top:25px;
	width:410px;
	background:#eee;
}
/* BUTTON STYLEZ
***************/
button {
	border:none;
	margin:0 auto;
	background-color:#ccc;
	border-radius: 4px;
	overflow:hidden;
	display:inline-block;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25),
				0px 2px 4px rgba(0, 0, 0, 0.25);
}
.twitter, .dribbble, .rdio {
	float:left;
	padding:18px 26px;
	display: inline-block;
	box-shadow:inset 0px -3px 0px rgba(0, 0, 0, 0.1);
	background-image: linear-gradient(180deg, #fff 20%, #eee 100%);
	
	-webkit-transition: all 0.3s linear; 
	-moz-transition: all 0.3s linear; 
	-o-transition: all 0.3s linear; 
	transition: all 0.3s linear;
}
.twitter, .dribbble {
	box-shadow: 1px 0px 1px rgba(255, 255, 255, 0.9), 
	inset -1px 0px 1px rgba(0, 0, 0, 0.1);
}
/* HULLO TEXT
************/
.twitter p, .dribbble p, .rdio p {
	text-shadow: 0px 2px 0px #fff;
}
p {
	text-align: center;
	font-family: 'Futura';
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
}
a {
	text-decoration: none;
	color:#000;
}
.twitter p {
	color:#00a0d1;
}
.dribbble p {
	color:#ea4c89;
}
.rdio p {
	color:#008fd5;
}
/* HOVER STATES
*************/
.twitter:hover {
	background-image: linear-gradient(180deg, #00a0d1 0%, #0086af 100%);
	box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2);
}
	.twitter:hover p {
		color:#fff;
		text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
	}
.rdio:hover {
	background-image: linear-gradient(180deg, #0092da 0%, #0073ac 100%);
	box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2);
}
	.rdio:hover p {
		color:#fff;
		text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
	}
.dribbble:hover {
	background-image: linear-gradient(180deg, #ea4c89 0%, #ca3b72 100%);
	box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2);
}
	.dribbble:hover p {
		color:#fff;
		text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
	}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.