HTML

<div id="icons">
  <a href="#" class="zocial-facebook"></a>
  <a href="#" class="zocial-twitter"></a>
  <a href="#" class="zocial-googleplus"></a>
  <a href="#" class="zocial-vimeo"></a>
  <a href="#" class="zocial-spotify"></a>
  <a href="#" class="zocial-dribbble"></a>
  <a href="#" class="zocial-soundcloud"></a>
  <a href="#" class="zocial-skype"></a>
  <a href="#" class="zocial-youtube"></a>
  <a href="#" class="zocial-steam"></a>
  <a href="#" class="zocial-pinterest"></a>
  <a href="#" class="zocial-linkedin"></a>
  <a href="#" class="zocial-yahoo"></a>
  <a href="#" class="zocial-smashing"></a>
</div>

SCSS CSS LESS

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

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

body, html {
  width: 100%;
  font-size: 16px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  font-size: 0.75em;
  opacity: 0.35;
}

#icons {
  display: block;
  width: 500px;
  max-width: 100%;
  min-width: 300px;
  text-align: center;
  margin: 40px auto;
}

// Colours
$colors: (
  #3c689f, //facebook
  #3b89b1, //twitter
  #d16847, //googleplus
  #3580c5, //vimeo
  #5ea240, //spotify
  #d14788, //dribbble
  #e89b49, //soundcloud
  #369cc6, //skype
  #d14747, //youtube
  #444444, //steam
  #dc3d5f, //pinterest
  #558ec9, //linkedin
  #743c9f, //yahoo
  #dc5334  //smashing
);
$colors_length: length($colors);

a {
  display: inline-block;
  margin: 40px 5px 0 5px;
  width: 48px;
  height: 48px;
  text-align: center;
  background: #ff0000;
  line-height: 48px;
  font-size: 16px;
  text-decoration: none;
  color: #fff;
  -webkit-transition: all 0.2s ease-in-out;

  @for $i from 1 through $colors_length {
    &:nth-child(#{$i}) {
      $bgn: nth($colors, $i);
      background: $bgn;
      background: -webkit-linear-gradient($bgn,lighten($bgn,10%));
      background-size:1px 200px;
      box-shadow: inset 0 -2px 0 darken($bgn,10%);
    }
  }
  
  // Hover
  &:hover {
    background-position: 100px;
    -webkit-transition: all 0.2s ease-in-out;
    -webkit-transform: translate3d(0,-2px,0);
  }
  // Active
  &:active {
    -webkit-transition: all 0.2s ease-in-out;
    -webkit-transform: translate3d(0,0,0);
  }
}

JavaScript

$("a").bind('click', function(event){
  event.preventDefault();
})