A CodePen by Maik. Share-Buttons in pure CSS

index.html

<div class="share">
  <h1>Share-Buttons in CSS</h1>
  <a href="#" class="twitter">Tweet</a>
  <a href="#" class="facebook">Empfehlen</a>
  <a href="#" class="googleplus">+1</a>
  <a href="#" class="flattr">Flattr</a>
  <br/><br/>
</div>

script.js

/* made for buntepixel.org */

style.css

@font-face {
font-family: 'Genericons';
font-style: normal;
font-weight: 400;
src: local('Genericons'), url(http://buntepixel.org/wp-content/themes/sophie/font/genericons-regular-webfont.woff) format('woff');
}

.share {
  width: 350px;
  margin: 100px auto;
}

a.twitter:before {
content: '\f202';
font-family: 'Genericons';
color: #00aced;
padding-right: 5px;
line-height: 15px;
font-weight: normal;
vertical-align: top;
}

a.twitter {
background-color: #f8f8f8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#d9d9d9));
background-image: -moz-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image: -o-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image: -ms-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image: linear-gradient(top,#f8f8f8,#d9d9d9);
border: 1px solid #bbb;
border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
color: #333;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 12px;
line-height: 13px;
font-style: normal;
font-variant: normal;
font-weight: bold;
padding: 2px 6px 2px 6px;
text-decoration: none;
text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px;
vertical-align: top;

}


a.twitter:focus,
a.twitter:hover,
a.twitter:active {
border-color:#bbb;
background-color:#f8f8f8;
background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#d9d9d9));
background-image:-moz-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image:-o-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image:-ms-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image:linear-gradient(top,#f8f8f8,#d9d9d9);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

a.twitter:active{
background-color:#efefef;
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0 3px 5px rgba(0,0,0,0.1);
box-shadow:inset 0 3px 5px rgba(0,0,0,0.1);
}


a.facebook:before {
content: '\f203';
font-family: 'Genericons';
padding-right: 4px;
font-weight: normal;
font-size: 14px;
line-height: 14px;
vertical-align: top;
}

a.facebook {
background: #eceef5;
-webkit-border-radius: 3px;
border: 1px solid #cad4e7;
cursor: pointer;
padding: 3px 4px 4px 3px;
white-space: nowrap;
color: #3b5998;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 11px;
text-decoration: none;
vertical-align: top;
margin-left: 10px;
}

a.facebook:hover {
border-color: #9dacce;
}



a.googleplus:before {
content: '\f206';
font-family: 'Genericons';
padding-right: 4px;
font-weight: normal;
font-size: 16px;
line-height: 14px;
vertical-align: top;
}

a.googleplus {
background-color: #f3f3f3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), to(rgb(217, 217, 217)));
background-image: -webkit-linear-gradient(top, rgb(243, 243, 243), rgb(217, 217, 217));
background-image: -moz-linear-gradient(top, rgb(243, 243, 243), rgb(217, 217, 217));
background-image: -o-linear-gradient(top, rgb(243, 243, 243), rgb(217, 217, 217));
background-image: -ms-linear-gradient(top, rgb(243, 243, 243), rgb(217, 217, 217));
background-image: linear-gradient(top, rgb(243, 243, 243), rgb(217, 217, 217));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f3f3f3', EndColorStr='#d9d9d9');
border: 1px solid #cbcbcb;
color: #da573c;
font-size: 14px;
font-family: 'Helvetica Neue', Arial, sans-serif;
border-radius: 3px;
-webkit-border-radius: 3px;
text-decoration: none;
padding: 3px 2px 1px 1px;
vertical-align: top;
margin-left: 10px;

}

a.googleplus:hover{
background-color: #f7f7f7;
background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgb(247, 247, 247)), to(rgb(255, 255, 255)));
background-image: -webkit-radial-gradient(50% 50%, rgb(255, 255, 255), rgb(247, 247, 247));
background-image: -moz-radial-gradient(50% 50%, rgb(255, 255, 255), rgb(247, 247, 247));
background-image: -o-radial-gradient(50% 50%, rgb(255, 255, 255), rgb(247, 247, 247));
background-image: -ms-radial-gradient(50% 50%, rgb(255, 255, 255), rgb(247, 247, 247));
background-image: radial-gradient(50% 50%, rgb(255, 255, 255), rgb(247, 247, 247));
}

a.flattr {
background-color: #92bd5e;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(146, 189, 94)), to(rgb(136, 176, 88)));
background-image: -webkit-linear-gradient(top, rgb(146, 189, 94), rgb(136, 176, 88));
background-image: -moz-linear-gradient(top, rgb(146, 189, 94), rgb(136, 176, 88));
background-image: -o-linear-gradient(top, rgb(146, 189, 94), rgb(136, 176, 88));
background-image: -ms-linear-gradient(top, rgb(146, 189, 94), rgb(136, 176, 88));
background-image: linear-gradient(top, rgb(146, 189, 94), rgb(136, 176, 88));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#92bd5e', EndColorStr='#88b058');
border: 1px solid #7ea352;
color: #fff;
text-decoration: none;
padding: 3px 10px 2px 10px;
font-size: 13px;
font-family: 'Helvetica Neue', Arial, sans-serif;
border-radius: 4px;
-webkit-border-radius: 4px;
vertical-align: top;
margin-left: 10px;
}

a.flattr:hover {
background-color: #f59425;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(245, 148, 37)), to(rgb(232, 140, 35)));
background-image: -webkit-linear-gradient(top, rgb(245, 148, 37), rgb(232, 140, 35));
background-image: -moz-linear-gradient(top, rgb(245, 148, 37), rgb(232, 140, 35));
background-image: -o-linear-gradient(top, rgb(245, 148, 37), rgb(232, 140, 35));
background-image: -ms-linear-gradient(top, rgb(245, 148, 37), rgb(232, 140, 35));
background-image: linear-gradient(top, rgb(245, 148, 37), rgb(232, 140, 35));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f59425', EndColorStr='#e88c23');
border: 1px solid #db8421;
}