How to customize buttons for social networks?

Navigation
4

I was wondering how do I customize buttons for sharing something on some social network. In the web there are already the default buttons but I wanted to customize them just by using CSS. I plan to do as these here: link

    
asked by anonymous 30.06.2015 / 03:07

1 answer

7

This can be done as follows:
Here in this example we will be using font-awesome for demonstration but then you you can change and use images instead of using font-awesome if you prefer, to avoid loading the complete source for your site, if you are not using it anywhere else

To use fonte-awesome first we need to implement it on <head> of our site, using the following line of code: 

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

Next we'll create our HTML and 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;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">


<!-- Twitter -->
<a href="http://twitter.com/share?url=http://pt.stackoverflow.com/&text=<TEXT>&via=<VIA>" target="_blank" class="share-btn twitter">
    <i class="fa fa-twitter"></i>
</a>

<!-- Google Plus -->
<a href="https://plus.google.com/share?url=http://pt.stackoverflow.com/" target="_blank" class="share-btn google-plus">
    <i class="fa fa-google-plus"></i>
</a>

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

<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://pt.stackoverflow.com/&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
    <i class="fa fa-stumbleupon"></i>
</a>

<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://pt.stackoverflow.com/&title=<TITLE>" target="_blank" class="share-btn reddit">
    <i class="fa fa-reddit"></i>
</a>

<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=<URL>&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" class="share-btn linkedin">
    <i class="fa fa-linkedin"></i>
</a>

<!-- Email -->
<a href="mailto:?subject=<SUBJECT&body=<BODY>" target="_blank" class="share-btn email">
    <i class="fa fa-envelope"></i>
</a>

<br><br>

<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://pt.stackoverflow.com/" target="_blank" class="long-share-btn facebook">
    <i class="fa fa-facebook-square"></i> Facebook
</a>
    
30.06.2015 / 04:05
Sending external PHP variable to Javascript What is this class __php_incomplete_class?