Stronger: May 2012

I made this component very quickly today (< 10min) and it looks amazing noneless.

Step 1: save these lines as index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>

 <ul style="margin: 100px">
  <li style="font-weight: bold; text-shadow: #c0c0c0 3px 3px 5px; margin-bottom: 10px; color: #000;">
   <span>Share this page</span><br />
  </li>
  <li>
   <div class="shareIconsContainer">
    <div>
     <span class="shareIcons emailShare"></span>
     <span class="shadow" />     
    </div>
    <div>
     <span class="shareIcons facebookShare"></span>
     <span class="shadow" />
    </div>
    <div>
     <span class="shareIcons twitterShare"></span>
     <span class="shadow" />
    </div>
    <div>
     <span class="shareIcons googleplusShare"></span>
     <span class="shadow" />
    </div>
   </div>
  </li>
 </ul>
 
 <script type="text/javascript">
  $('span.shareIcons').on({
   mouseenter: function(){
    $(this).stop(false, true).animate({
     'height' : '32px',
     'marginTop' : '0px'
    }, 150);
   },
   mouseleave: function(){
    $(this).stop(false, true).animate({
     'height' : '12px',
     'marginTop' : '20px'
    }, 150);
   }
  });
 </script>

</body>
</html>

Step 2: create a folder and name it "css", save these lines as style.css in it

body, ul, li, h1, h2, h3{
 margin:0;
 padding:0;
}

body{
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 color:#fff;
 overflow-x:hidden;
}

span.helpIcons {
    width: 200px;
    height: 32px;
    display: block;
    float: left;
    margin-bottom: 10px;
}

span.helpIcons a {
    margin-left: 36px;
    margin-top: 32px;
    -moz-transition: all 0.5s ease 0s;
    opacity: 0.50;
    text-decoration: none;
    font-size: 0.9em;
    line-height: 4em;
}

span.helpIcons a:hover {
    opacity: 1;
}

div.shareIconsContainer {
    width: 200px;
    height: 32px;
    display: block;
}

span.shareIcons {
    width: 32px;
    height: 12px;
    display: block;
    float: left;
    margin-right: 10px;
    margin-top: 20px;
    cursor: pointer;
}

span.shadow {
    width: 42px;
    height: 12px;
    display: block;
    float: left;
    margin-left: -47px;
    margin-top: 27px;
    background: url("../images/shadow.png") no-repeat scroll 0px 0px transparent;
}

.alertShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -160px transparent;
}

.printShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -96px transparent;
}

.emailShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -0px transparent;
}

.facebookShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -32px transparent;
}

.twitterShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -128px transparent;
}

.googleplusShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -64px transparent;
}