<ul id="mediaHolder">
  <div class="boxLine"></div>
  <li><a href="javascript:void(0);"><span class="entypo-rss"></span></a></li>
  <div class="iconHolder">
      <ul>
        <li><a href="javascript:void(0);"><i class="entypo-twitter-circled"></i></a></li>
        <li><a href="https://plus.google.com/u/0/103174199911710836361"><i class="entypo-gplus-circled"></i></a></li>
        <li><a href="http://dribbble.com/bartos_lazarski"><i class="entypo-dribbble"></i></a></li>
      </ul>
  </div>
  <li class="socialMedia">   
    <div class="shadowLeft"></div>
    <a href="javascript:void(0);"><span class="entypo-chat"></span></a>
    <div class="shadowRight"></div>
  </li>
  <li><a href="javascript:void(0);"><span class="entypo-cog"></span></a></li>
</ul>
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
body {
  margin: 200px;
  background: url(http://picbox.im/image/8001e0e803-dark_fish_skin.png);
}
a {
display: inline-block;
  text-decoration: none;
}
#mediaHolder {
  background: url(http://picbox.im/image/d0ff7002d3-wood.jpg);
  display: inline-block;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: inset 0 6px 0 0 rgba(255,255,255,0.2), 
              inset 0 0 1px 0 rgba(0,0,0,0.2),
              inset 0 -20px 55px -15px rgba(0,0,0,0.1),
              inset 0 -2px 0 0 rgba(255,255,255,0.2), 
              0 2px 5px 2px rgba(0,0,0,0.1);
  position: relative;
}
#mediaHolder .boxLine {
width: 100%;
  height: 1px;
  background: #e7b98c;
  top: 6px;
  position: absolute;
  box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2),
    0 -1px 1px 0 rgba(255,255,255,0.1);
  
}
#mediaHolder > li {
  float: left;
  border-right: 1px solid rgba(0,0,0,0.2);
  border-left: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
  position: relative;
  
}
#mediaHolder > li:first-child {border-left: 0;}
#mediaHolder > li:last-child {border-right: 0;}
#mediaHolder > li .shadowLeft {
  position: absolute;
  height: 60px;
  width: 20px;
  background: rgba(0,0,0,1);
  box-shadow: 0 0 5px 7px rgba(0,0,0,1);
  left: -23px;
  bottom: -20px;
  -moz-transform:rotate(-7deg);
  -webkit-transform:rotate(-7deg);  
  opacity:0.4;   
}
#mediaHolder li .shadowRight {
  position: absolute;
  height: 60px;
  width: 20px;
  background: rgba(0,0,0,1);
  box-shadow: 0 0 5px 7px rgba(0,0,0,1);
  right: -23px;
  bottom: -20px;
  -moz-transform:rotate(7deg); 
  -webkit-transform:rotate(7deg);  
  opacity:0.4;   
}
#mediaHolder .iconHolder {
  position: absolute;
  background: rgb(75,139,207);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRiOGJjZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODVhODUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(75,139,207,1) 0%, rgba(40,90,133,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(75,139,207,1)), color-stop(100%,rgba(40,90,133,1)));
  background: -webkit-linear-gradient(top,  rgba(75,139,207,1) 0%,rgba(40,90,133,1) 100%);
  background: -o-linear-gradient(top,  rgba(75,139,207,1) 0%,rgba(40,90,133,1) 100%);
  background: -ms-linear-gradient(top,  rgba(75,139,207,1) 0%,rgba(40,90,133,1) 100%);
  background: linear-gradient(to bottom,  rgba(75,139,207,1) 0%,rgba(40,90,133,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b8bcf', endColorstr='#285a85',GradientType=0 );
  display: inline-block;
  width: 60px;
  bottom: 60px;
  left: 50%;
  text-align: center;
  margin-left: -30px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  z-index: 10;
  height: 10px;
  overflow: hidden;
   -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  box-shadow: 0 -1px 10px 1px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255,255,255,0.1);
}
#mediaHolder .iconHolder:after{
  content: "";
  position: absolute;
  width: 60px;
  height: 0px;
  background: #000;
  left: 50%;
  margin-left: -30px;
  bottom: -0px;
  z-index: -1;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  box-shadow: 0 0 5px 2px #000;
  opacity:0.8;   
}
#mediaHolder .iconHolder i {
  display: block;
  font-size: 32px;
  padding: 10px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3); 
}
#mediaHolder li a > span {
  padding: 20px 35px 15px 35px;
  display: inline-block;
  font-size: 28px;
  color: rgba(0,0,0,0.4);
  text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.iconHolderHeight {
  height: 165px !important;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.iconActive {
  color: #fff !important;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
   -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.socialMedia {
box-shadow: inset 0 -57px 0 0 rgba(0, 0, 0, 0), 
    inset 0 6px 0 0 rgba(223, 165, 108, 0);
 
   -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.socialMediaActiv {
box-shadow: inset 0 -57px 0 0 rgba(0, 0, 0, 0.1), inset 0 6px 0 0 rgba(223, 165, 108, 0.3);
   -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

}
.iconHolder ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
$(".shadowRight, .shadowLeft").hide();
$(".socialMedia").click(function() {
  $(".shadowRight, .shadowLeft").fadeToggle("fast", "linear");
  $('.iconHolder').toggleClass('iconHolderHeight');
  $('.entypo-chat').toggleClass('iconActive');
  $('.socialMedia').toggleClass('socialMediaActiv');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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