HTML:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,600,700,300' rel='stylesheet' type='text/css'> 
<div class="smhold red">     
  <div class="shine">         
    <span class="info_txt">Google + 
    </span>         
    <span class="icons google">a 
    </span>         
    <span class="vbutton"> 
      <g:plusone size="medium" href="http://www.megawrz.com"> 
      </g:plusone> 
<script type="text/javascript"> 
  (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
  })(); 
</script> 
    </span>     
  </div> 
</div> 
<div class="smhold blue">     
  <div class="shine">         
    <span class="info_txt">Facebook 
    </span>         
    <span class="icons facebook">b 
    </span>         
    <span class="vbutton"> 
      <iframe src="http://www.facebook.com/plugins/like.php?href=www.megawrz.com&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"> 
      </iframe> 
    </span>     
  </div> 
</div> 
<div class="smhold lightblue">     
  <div class="shine">         
    <span class="info_txt">Twitter 
    </span>         
    <span class="icons twitter">c 
    </span>         
    <span class="vbutton"> 
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.megawrz.com">Tweet</a>             
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
    </span>     
  </div> 
</div> 
<div class="smhold orange">     
  <div class="shine">         
    <span class="info_txt">RSS Feed 
    </span>         
    <span class="icons rss">e 
    </span>     
  </div> 
</div>          
<div class="smhold darkblue">     
  <div class="shine">         
    <span class="info_txt">tumblr 
    </span>         
    <span class="icons tumblr">d 
    </span>         
    <span class="vbutton"> 
      <a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a> 
    </span>     
  </div> 
</div>      
<div class="smhold vimeoblue">     
  <div class="shine">         
    <span class="info_txt">Vimeo 
    </span>         
    <span class="icons vimeo">f 
    </span>     
  </div> 
</div> 
<div class="smhold flickrpink">     
  <div class="shine">         
    <span class="info_txt">Flickr 
    </span>         
    <span class="icons flickr">g 
    </span>     
  </div> 
</div> 
<div class="smhold picasapurple">     
  <div class="shine">         
    <span class="info_txt">Picasa 
    </span>         
    <span class="icons picasa">h 
    </span>     
  </div> 
</div> 
<div class="smhold dribbblepink">     
  <div class="shine">         
    <span class="info_txt">Dribbble 
    </span>         
    <span class="icons dribbble">i 
    </span>     
  </div> 
</div> 
<div class="smhold forrstgreen">     
  <div class="shine">         
    <span class="info_txt">Forrst 
    </span>         
    <span class="icons forrst">j 
    </span>     
  </div> 
</div> 
<div class="smhold deviantartgreen">     
  <div class="shine">         
    <span class="info_txt">DeviantART 
    </span>         
    <span class="icons deviantart">k 
    </span>     
  </div> 
</div> 
<div class="smhold githubblue">     
  <div class="shine">         
    <span class="info_txt">GitHub 
    </span>         
    <span class="icons github">l 
    </span>     
  </div> 
</div> 
<div class="smhold youtubered">     
  <div class="shine">         
    <span class="info_txt">YouTube 
    </span>         
    <span class="icons youtube">n 
    </span>     
  </div> 
</div> 
<div class="smhold wordpressblue">     
  <div class="shine">         
    <span class="info_txt">Wordpress 
    </span>         
    <span class="icons wordpress">o 
    </span>     
  </div> 
</div> 
<div class="smhold bloggerorange">     
  <div class="shine">         
    <span class="info_txt">Blogger 
    </span>         
    <span class="icons blogger">p 
    </span>     
  </div> 
</div> 
<div class="smhold amazonorange">     
  <div class="shine">         
    <span class="info_txt">Amazon 
    </span>         
    <span class="icons amazon">q 
    </span>     
  </div> 
</div> 
<div class="smhold applegrey">     
  <div class="shine">         
    <span class="info_txt">Apple 
    </span>         
    <span class="icons apple">r 
    </span>     
  </div> 
</div> 
<div class="smhold androidgreen">     
  <div class="shine">         
    <span class="info_txt">Android 
    </span>         
    <span class="icons android">s 
    </span>     
  </div> 
</div> 
<div class="smhold skypeblue">     
  <div class="shine">         
    <span class="info_txt">Skype 
    </span>         
    <span class="icons skype">t 
    </span>     
  </div> 
</div> 
<div class="smhold pinterestred">     
  <div class="shine">         
    <span class="info_txt">Pinterest 
    </span>         
    <span class="icons pinterest">v 
    </span>     
  </div> 
</div> 
<div class="smhold lastfmred">     
  <div class="shine">         
    <span class="info_txt">Lastfm 
    </span>         
    <span class="icons lastfm">u 
    </span>     
  </div> 
</div> 
<div class="smhold xinggreen">     
  <div class="shine">         
    <span class="info_txt">Xing 
    </span>         
    <span class="icons xing">w 
    </span>     
  </div> 
</div>



CSS:

body { 
    font-family: 'Open Sans', sans-serif; 
    margin: 0 auto; 
    background: url(http://subtlepatterns.com/patterns/dark_wood.png) center fixed; 
} 
.smhold:hover .icons { 
    font-size: 200px !important; 
} 
.smhold { 
    height: 100px; 
    overflow: hidden; 
    width: 320px; 
    margin: 20px auto; 
    box-shadow: 0 0 8px 0px rgba(0,0,0,0.4), 
  0 0 0px 1px rgba(0,0,0,0.4),  
  inset  0 0 0px 1px rgba(255,255,255,0.3); 
} 
.red { 
    background: #cb0000; 
} 
.google { 
    position: absolute; 
    right: 10px; 
} 
.blue { 
    background: #3B5998; 
} 
.facebook { 
    position: absolute; 
    right: 10px; 
} 
.lightblue { 
    background: #4099FF; 
} 
.twitter { 
    position: absolute; 
    right: 10px; 
    font-size: 120px !important; 
} 
.orange { 
    background: #FF7F00; 
} 
.rss { 
    position: absolute; 
    right: 10px; 
    font-size: 100px !important; 
} 
.darkblue { 
    background: #31546f; 
} 
.tumblr { 
    position: absolute; 
    right: 10px; 
    font-size: 110px !important; 
} 
.vimeoblue { 
    background: #00adef; 
} 
.vimeo { 
    position: absolute; 
    right: 10px; 
} 
.flickrpink { 
    background: #FF0084; 
} 
.flickr { 
    position: absolute; 
    right: 10px; 
    top: -25px; 
} 
.picasapurple { 
    background: #9864ae; 
} 
.picasa { 
    position: absolute; 
    right: 10px; 
} 
.dribbblepink { 
    background: #c7386e; 
} 
.dribbble { 
    position: absolute; 
    right: 10px; 
} 
.forrstgreen { 
    background: #345129; 
} 
.forrst { 
    position: absolute; 
    right: 10px; 
    top: -35px; 
} 
.deviantartgreen { 
    background: #002e21; 
} 
.deviantart { 
    position: absolute; 
    right: 10px; 
    top: -10px; 
} 
.githubblue { 
    background: #4b6574; 
} 
.github { 
    position: absolute; 
    right: 10px; 
} 
.youtubered { 
    background: #cb0000; 
} 
.youtube { 
    position: absolute; 
    right: 10px; 
} 
.wordpressblue { 
    background: #1c4162; 
} 
.wordpress { 
    position: absolute; 
    right: 10px; 
} 
.bloggerorange { 
    background: #FF7F00; 
} 
.blogger { 
    position: absolute; 
    right: 10px; 
    top: -10px; 
} 
.amazonorange { 
    background: #e6940a; 
} 
.amazon { 
    position: absolute; 
    right: 10px; 
    top: -20px; 
} 
.applegrey { 
    background: #666; 
} 
.apple { 
    position: absolute; 
    right: 10px; 
} 
.androidgreen { 
    background: #a4c63b; 
} 
.android { 
    position: absolute; 
    right: 10px; 
} 
.skypeblue { 
    background: #00aff0; 
} 
.skype { 
    position: absolute; 
    right: 10px; 
} 
.pinterestred { 
    background: #cb2026; 
} 
.pinterest { 
    position: absolute; 
    right: 10px; 
} 
.xinggreen { 
    background: #005a5f; 
} 
.xing { 
    position: absolute; 
    right: 10px; 
} 
.lastfmred { 
    background: #d9004a; 
} 
.lastfm { 
    position: absolute; 
    right: 10px; 
} 
.info_txt { 
    display: inline-block; 
    position: absolute; 
    background: rgb(255,255,255); 
    background: url(data: image/svg+xml; 
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(244,244,244,1))); 
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    background: linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    top: -5px; 
    left: -5px; 
    padding: 10px 5px 5px 10px; 
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 1); 
    color: #666; 
    font-size: 11px; 
    text-shadow: 1px 1px 0px white; 
} 
.vbutton { 
    position: absolute; 
    top: 75px; 
    left: 5px; 
} 
.shine { 
    height: 100px; 
    overflow: hidden; 
    width: 320px; 
    position: relative; 
    background: url(data: image/svg+xml; 
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iNjklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(69%,rgba(0,0,0,0.01)), color-stop(70%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0))); 
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%); 
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%); 
    background: linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#00000000',GradientType=0 ); 
} 
.icons { 
    font-family: 'IcoMoon'; 
    font-size: 134px; 
    color: rgba(255,255,255,1); 
    text-shadow: 2px 2px 0 rgba(0,0,0,0.2); 
    -webkit-transition: all .25s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -o-transition: all .25s ease-in-out; 
    -ms-transition: all .25s ease-in-out; 
    transition: all .25s ease-in-out; 
    cursor: pointer; 
} 
@font-face { 
    font-family: 'IcoMoon'; 
    src: url('http://www.mediumidee.de/fonts/IcoMoon.eot'); 
    src: url('http://www.mediumidee.de/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),         
  url('http://www.mediumidee.de/fonts/IcoMoon.woff') format('woff'),         
  url('http://www.mediumidee.de/fonts/IcoMoon.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
/* Use the following CSS code if you want to use data attributes for inserting your icons */ 
[data-icon]:before { 
    font-family: 'IcoMoon'; 
    content: attr(data-icon); 
    speak: none; 
} 
/* Use the following CSS code if you want to have a class per icon */ 
[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: 'IcoMoon'; 
    font-style: normal; 
    speak: none; 
} 
.icon-google-plus:before { 
    content: "\0061"; 
} 
.icon-facebook:before { 
    content: "\0062"; 
} 
.icon-twitter:before { 
    content: "\0063"; 
} 
.icon-twitter-2:before { 
    content: "\0064"; 
} 
.icon-feed:before { 
    content: "\0065"; 
} 
.icon-vimeo:before { 
    content: "\0066"; 
} 
.icon-flickr:before { 
    content: "\0067"; 
} 
.icon-picassa:before { 
    content: "\0068"; 
} 
.icon-dribbble:before { 
    content: "\0069"; 
} 
.icon-forrst:before { 
    content: "\006a"; 
} 
.icon-deviantart:before { 
    content: "\006b"; 
} 
.icon-github:before { 
    content: "\006c"; 
} 
.icon-github-2:before { 
    content: "\006d"; 
} 
.icon-youtube:before { 
    content: "\006e"; 
} 
.icon-wordpress:before { 
    content: "\006f"; 
} 
.icon-blogger:before { 
    content: "\0070"; 
} 
.icon-amazon:before { 
    content: "\0071"; 
} 
.icon-apple:before { 
    content: "\0072"; 
} 
.icon-android:before { 
    content: "\0073"; 
} 
.icon-skype:before { 
    content: "\0074"; 
} 
.icon-lastfm:before { 
    content: "\0075"; 
} 
.icon-pinterest:before { 
    content: "\0076"; 
} 
.icon-xing:before { 
    content: "\0077"; 
}

http://www.megawrz.com/css/193100-social-media-boxes-like-1-button.html

Social media boxes with hover effect and +1 or like button.

Note: Firefox is buggy - It does not allow loading cross origin fonts (in iframes) - But it will definitely work when you try it out on your website/tests.

Social Media Boxes with like/+1 Button

CSS