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.