<link href='https://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'>
  
<div id="wrapper">
  
  <div class="share-circle facebook">
    <span>like<br/>it!</span>
    <a href="#" ></a>
  </div>
  
  <div class="share-circle twitter">
    <span>tweet<br/>it!</span>
    <a href="#" ></a>
  </div>
  
  <div class="share-circle pinterest">
    <span>pin<br/>it!</span>
    <a href="#" ></a>
  </div>   
   <div class="share-circle google">
    <span>plus<br/>it!</span>
     
    <a href="#" ></a>
  </div>   
  
</div>
body {
	background: #ccc;
}

#wrapper{
	width:800px;
  margin:40px auto;
}

.share-circle{
	width:150px;
	height:150px;	
  position:relative;
	border-radius: 50%;
  border-width: 10px;
  border-style:solid;
  float:left;
  transition:
    background-color 300ms ease-out; 
}
.share-circle:not(:last-child){
  margin-right:20px;
}

.share-circle span{
	width:150px;
	height:150px;	
	display: table-cell; 
	vertical-align: middle; 
	text-align: center;
	line-height:34px;
	font-family: 'Open Sans', sans-serif;
	font-weight:800;
	font-size:34px;
	color:#FFF;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);  
	transition: line-height 300ms ease-out;
}
.share-circle:hover span{
	line-height:65px;
}

.share-circle a{
  position:absolute;
  display:block;
  height: 20px;
  top:66px;
  transition: opacity 300ms ease;
  opacity:0;
}
.share-circle:hover a{
  opacity:1;
}

.facebook{
  border-color:#30497e;
	background-color:#3B5998;
}
.facebook:hover{
  background-color:#4164ac; 
}
.facebook a{
  left:25%;
  width: 73px;
  background: url('http://fivera.net/wp-content/uploads/2013/09/fb.png') no-repeat top left;
}

.twitter{
	border-color:#3d83d3;
	background-color:#4099ff;  
}
.twitter:hover{
	background-color:#4fa0fe;
}
.twitter a{
  left:18%;
  width: 96px;
  background: url('http://fivera.net/wp-content/uploads/2013/09/tw.png') no-repeat top left;    
}

.pinterest{
	border-color:#ab1e23;
	background-color:#C92228;   
}
.pinterest:hover{
	background-color:#d02f35;
}
.pinterest a{
  left:36%;
  width: 40px;
  background: url('http://fivera.net/wp-content/uploads/2013/09/pin.png') no-repeat top left;      
}
.google{
	border-color:#ab1e23;
	background-color:#2D2D2D;   
}
.google:hover{
	background-color:#2D2D2D;
}
.google a{
  left:36%;
  width: 40px;
  background: url('http://fivera.net/wp-content/uploads/2013/09/g.png') no-repeat top left;      
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.