<div class="container">
  <nav>
    <a href="#" class="icon icon-twitter-1"></a>
    <a href="#" class="icon icon-github-01"></a>
    <a href="#" class="icon icon-evernote"></a>
    <a href="#" class="icon icon-reddit"></a>
    <a href="#" class="icon icon-chn-tencent-03"></a>
    <a href="#" class="icon icon-android"></a>
    <a href="#" class="icon icon-brw-firefox"></a>
    <a href="#" class="icon icon-creativesloth"></a>
  </nav>
</div>
@import "compass/css3";

$red: #f33e6f;
$yellow: #fdb45c;

@keyframes jump {
  from { 
    text-shadow: 
    1px 1px 1px #fff,
    1px 0px 40px rgba(0,0,0,.1) }
  to { 
    opacity: .4;
    text-shadow: 
    0px 0px 0px #fff,
    1px -60px 0px rgba(0,0,0,.8) }
}
@keyframes jump-active {
  from { 
    text-shadow: 
    1px 1px 1px #fff,
    1px 0px 40px rgba(0,0,0,.1) }
  to { 
    opacity: 1;
    text-shadow: 
    0px 0px 0px #fff,
    1px -80px 0px black }
}
 
*{
  box-sizing: border-box;
}
  
html{
  height: 100%;
  border-top: 8px solid #282b36;  
}

body{
  background: $red;
  position: relative;
  height: 100%;
}
.container{
  width: 100%;
  min-height: 100%;
  background: white;
  margin-top: 10px;
  background-image: linear-gradient(#7a9da9,#fff5ee);
  box-shadow: inset 0 0 400px hsla(0,0%,0%,.1);
}

nav{
  width: 700px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -350px;
}
.icon{
  display: block;
  text-decoration: none;
  color: $red;
  text-align: center;
  font-size: 4em;
  float: left;
  margin-left: 15px;
  text-shadow: 
    1px 1px 1px #fff,
    0px 0px 0px rgba(0,0,0,.8);
    &:hover{
      transform: scale(1.1);
      animation: jump .4s infinite alternate;
   }
    &.active{
      transform: scale(1.1);
      animation: jump-active .4s infinite alternate;
    }

}

@media screen and (max-width: 760px) { 
  nav{
    width: 95%!important;
    margin-left: -48%;
  }
}
View Compiled
/*------------------------------------*\
    SIMPLE MENU, playing with text-shadow probably useless but fun tested in Webkit only
\*------------------------------------*/

$('.icon').on('click', function(){
   $('.icon').removeClass('active');
   $(this).addClass('active');
})
Run Pen

External CSS

  1. http://www.davilious.com/icons-2/css/pictonic.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js