A CodePen by Dec Norton. Bouncy Icons - Bouncy icons with a cool shadow effect

index.html

<ul class="bouncy">
  <li>
    <a href="#" title="Facebook"><span>Facebook</span></a>
    <span></span>
  </li>
  <li>
    <a href="#" title="Twitter"><span>Twitter</span></a>
    <span></span>
  </li>
  <li>
    <a href="#" title="Wordpress"><span>Wordpress</span></a>
    <span></span>
  </li>
  <li>
    <a href="#" title="Email"><span>Email</span></a>
    <span></span>
  </li>
</ul>

style.scss

@import "compass";
$icons : "data:image/png;base64,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";

.bouncy { 
  width:100%;
  padding:0; 
  list-style:none; 
  text-align:center;  
  
  li {
    display:inline-block;
    height:70px;
    padding-top:20px;
    
    a {
      display:inline-block;
      position:relative;
      padding:8px;
      margin:3px;
      
      background-color: rgba(79,108,126,1);
      color:#ffffff;
      text-align:right;
      text-decoration: none;
      
      opacity:0.4;
     	border-radius:100%;
     	transition:all 0.2s;
      
      span {
        display: block;
        width:24px;
        height:24px;
        font-size:0;
        text-indent:-200%;
        overflow: hidden;
        
        background-image: url($icons);
        background-repeat: no-repeat;
      }
    }
    
    &:nth-child(2) span { background-position: 0px -24px; } /* Twitter */
    &:nth-child(3) span { background-position: 0px -48px; } /* Wordpress */
    &:nth-child(4) span { background-position: 0px -72px; } /* Email */
    
    &:hover {
      a {
        top:-5px;
        opacity:1;
        animation-name: bounce;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }
      
      > span {
        width:60%;
        filter: blur(1px);
        animation-name: shadow-bounce;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }
    }
    
    &:active {
      a {
        top:-4px;
      }
      > span {
        width:70%;
      }
    }
    
    > span {
      display:block;
      content:"";
      width:80%;
      height:2px;
      margin:0 auto;
      background-color:rgba(0,0,0,0.1);
      
      border-radius:100% 100%;
      box-shadow:0 0 3px rgba(0,0,0,0.3);
      filter: blur(1px);
    }
  }
}


@keyframes "bounce" {
  0% { top: 0px; }
  60% { top: -10px; }
  100% { top: -5px; opacity: 1; }
}


@keyframes "shadow-bounce" {
  0% { width: 80%;  }
  40% { width: 40%; -webkit-filter: blur(2px); }
  100% { width: 60%; -webkit-filter: blur(1px); }
}