Replace Social Share Links With CSS

As part of renovating this site, I wanted to cut down on the resource-heavy social media share links at the end of each post. I’ve modified some of the CSS created by Chris Ferdinandi to replace the aforementioned links with simple color-based links to various social platforms. Furthermore, I tapped into the FontAwesome repository to add an icon to each link. Here’s the CSS block followed by my PHP-HTML (written for WordPress).


.btn {
    font-size: .9375em;
    line-height: 1.2;
    font-weight: bold;
    background-color: #08c;
    border: .0725em solid #08c;
    border-radius: .0725em;
    margin-right: .3125em;
    margin-bottom: .3125em;
    padding: .5em .6875em;
}

.btn,.btn:hover,a .btn:hover,.btn.active {
    color: #FFF;
}

.btn:hover,a .btn:hover,.btn.active {
    background-color: #005580;
    text-decoration: none;
    border-color: #005580;
}

.btn-tweet {
    background-color: #41b7d8;
    border-color: #41b7d8;
}

.btn-tweet:hover,a .btn-tweet:hover {
    background-color: #238caa;
    border-color: #238caa;
}

.btn-facebook {
    background-color: #3b5997;
    border-color: #3b5997;
}

.btn-facebook:hover,a .btn-facebook:hover {
    background-color: #263960;
    border-color: #263960;
}

.btn-google {
    background-color: #d64937;
    border-color: #d64937;
}

.btn-google:hover,a .btn-google:hover {
    background-color: #a02f21;
    border-color: #a02f21;
}

.btn-rss {
    background-color: #F8BC2E;
    border-color: #F8BC2E;
}

.btn-rss:hover,a .btn-rss:hover {
    background-color: #e9aa16;
    border-color: #e9aa16;
}

<a title="Share on Twitter" target="_blank" href="https://twitter.com/intent/tweet?text=<?php the_title() ?>&url=<?php the_permalink() ?>&via=RKmd" class="btn btn-tweet">
<i class="fa fa-twitter fa-lg"></i>  Tweet</a>

<a title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>" class="btn btn-facebook">
<i class="fa fa-facebook fa-lg"></i>  Share</a>

<a title="Share on Google Plus" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink() ?>" class="btn btn-google">
<i class="fa fa-google-plus fa-lg"></i>  Share</a>

<a title="Subscribe to RSS" target="_blank" href="https://feedpress.me/rkmd" class="btn btn-rss">
<i class="fa fa-rss fa-lg"></i>  Subscribe</a>

This relatively small modification has substantially reduced the number of resources required for page loads. You can see an example of the result at the bottom of this post.

You might also like

Leave A Reply

Your email address will not be published.