A Pen by Adrian Payne.

'strong'-social-buttons.markdown

'strong' social buttons

Just a simple CSS rollover effect with transitions and also my first pen!

A Pen by Adrian Payne on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'>
  
<div id="wrapper">
  
  <div class="share-circle facebook">
    <span>Like<br/>this!</span>
    <a href="#" ></a>
  </div>
  
  <div class="share-circle twitter">
    <span>Tweet<br/>this!</span>
    <a href="#" ></a>
  </div>
  
  <div class="share-circle pinterest">
    <span>Pin<br/>this!</span>
    <a href="#" ></a>
  </div>   
  
</div>

style.css

#wrapper{
	width:550px;
  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://assets.adrianpayne.me/g/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://assets.adrianpayne.me/g/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://assets.adrianpayne.me/g/pin.png') no-repeat top left;      
}