CodePen

HTML

            
              <div class="wrapper">
  <a href="http://www.dribbble.com/waynespiegel" target="_blank">
    <div class="icon entypo-dribbble"></div>
  </a>
  <a href="http://www.twitter.com/waynespiegel" target="_blank">
    <div class="icon entypo-twitter"></div>
  </a>
  <a href="http://www.facebook.com/wayne.spiegel" target="_blank">
    <div class="icon entypo-facebook"></div>
  </a>
</div>
            
          
!
via HTML Inspector

CSS

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


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

html {
  background: #eee;
  font-size: 10px;
}

.wrapper {
  margin: 10% auto;
  width: 240px;
}

.icon {
  float: left;
  margin: 0 10px;
  width: 50px;
  height: 50px;
  border: 4px solid #fff;
  border-radius: 100%;
  box-shadow: 0 0 3px #ddd, inset 0 0 3px #666;
  cursor: pointer;
  
  color: #fff;
  font-size: 1.8em;
  -webkit-font-smoothing: antialiased;
  line-height: 5.1rem;
  text-align: center;
  text-shadow: 0px 0px 2px #666;
  
  -webkit-transition: .3s;
		 -moz-transition: .3s;
			 -o-transition: .3s;
			-ms-transition: .3s;
			  	transition: .3s;
}

.icon:hover {
  margin: -10px 10px;
}

.entypo-dribbble {background: #ea4c89;}

.entypo-twitter {background: #4099ff;}

.entypo-facebook {background: #3b5998;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................