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>
@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();
})

Recently Added

Social Icons

SCSS social icon with hover effect and active state.

Loader

SCSS loader fade in and fade out.

Keyboard

CSS keyboard with beautiful color and effect.

Randomize

Showing random numbers mixed up.

Buttons

Buttons with beautiful hover effect.

Glass Effect

Beautiful glass effect with css.

Clip Animation

Creating clip animation with css.

Google Icons

Google logos with css.

Abstract Art

Abstract art with pure css. Combination of shapes created with css.