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;
}


  Tweet


  Share


  Share


  Subscribe

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.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Try EchoTools - my free, iOS ultrasonography reference application!

Latest Articles