How to customize buttons for social networks?

Asked

Viewed 3,081 times

4

I wanted to know how to customize the buttons to share something on some social network. In web there are already the default buttons but I wanted to customize them just using CSS. I plan to do like these here: http://imgur.com/NLMlwmV

css3 facebook twitter

1 answer

7


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

To use the fonte-awesome first we need to implement it in the <head> from our website, 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 will 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=/&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=/" 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=/" target="_blank" class="share-btn facebook">
    <i class="fa fa-facebook"></i>
</a>

<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=/&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=/&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=/" target="_blank" class="long-share-btn facebook">
    <i class="fa fa-facebook-square"></i> Facebook
</a>

  • Thanks, solved my problems. I’d just like to know one more thing. How do I do this with the Facebook like button?

  • 1

    Unfortunately I do not think that this can be done using the like button because this behaves differently. But if you are looking to add the counter of likes/shares to one of these custom Facebook buttons, take a look at the this question to see how you can add a contador customized to your button

Browser other questions tagged css3 facebook twitter

You are not signed in. Login or sign up in order to post.