Hex Social Icons From http://codepen.io/Bayne/pen/Btnrv

hex_social.css

/* init css */
body{100%}
ul{ list-style:none; margin:0; padding:0; }
a{ color:#000; text-decoration:none;} 

/* hexagon */
ul > li{
  position:relative;
  width:30px;
  height:33px;
}
ul > li > a::before,
ul > li > a::after{
  content:"";
  width:100%;
  height:100%;
  display:block;
  position:absolute;
}
ul > li > a::before{
  transform: rotate(60deg);
}
ul > li > a::after{
  transform: rotate(-60deg);
}
ul > li > a{
  background:transparent;
  width:30px;
  height:16px;
  display:block;
  position:relative;
  top:7px;
}
ul > li > a > span{
  display:none;
}

/* organize */
ul{
  width:138px;
  margin:30px auto 0;
}
ul > li{
  float:left;
  margin:0 2px;
}
ul > li.social_pinterest{ margin-left:20px; }

/* effet */
li{
  opacity:1;
  top:0;
  transition:.3s all;
}
li:hover{
  opacity:.85;
  top:-1px;
}
li:active{
  top:2px;
}

/* icon */
ul > li.social_facebook{ background-position:0% 0%; }
ul > li.social_twitter{ background-position:32% 0%; }
ul > li.social_google{ background-position:65% 0%; }
ul > li.social_linkedin{ background-position:98% 0%; }
ul > li.social_pinterest{ background-position:0% 100%; }
ul > li.social_flickr{ background-position:33% 100%; }
ul > li.social_rss{ background-position:66% 100%; }
ul > li {
  background-image:url();
}

hex_social.html

_