JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://truquesedicascss.blogspot.pt/" target="_blank" class="share-btn facebook">
    <i class="fa fa-facebook"></i>
</a>

CSS

/* Social Button CSS */
.share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    padding: 0.5em;
    width: 4em;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
}

.share-btn:hover {
    color: #eeeeee;
}

.share-btn:active {
    position: relative;
    top: 2px;
    box-shadow: none;
    color: #e2e2e2;
    outline: none;
}

.twitter     { background-color: #55acee; }
.google-plus { background-color: #dd4b39; }
.facebook    { background-color: #3B5998; }
.stumbleupon { background-color: #444444; }
.reddit      { background-color: #FFA500; }
.linkedin    { background-color: #4875B4; }
.email       { background-color: #444444; }

/* Código para botão com texto */
.long-share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    padding: 0.5em 1.5em;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: bold;
}
.long-share-btn:hover {
    color: #eeeeee;
}
.long-share-btn:active {
    position: relative;
    top: 2px;
    box-shadow: none;
    color: #e2e2e2;
    outline: none;
}
a.long-share-btn {
    text-decoration: none;
}