Design Social Media Sharing Buttons With Just CSS (And Nothing Else)

I am a big fan of minimalism. By minimalism, I don’t mean cutting down on features that are necessary. By minimalism, what I mean is keeping the bare minimum of bells and whistles so that the accessories don’t get in the way of the core of a product.

You might have noticed that this website has got a fresh coat of paint (thanks to @kaushik). In this re-design, I wanted to keep things simple and much focus was given on usability and loading time of the website. I have cut down a lot of things and tried to followed this principle

You have to make every single detail perfect. And you have to limit the number of details

This time, I decided to completely remove social sharing buttons that interfere with the loading time of the website. Facebook Like buttons, Twitter follow buttons, Twitter’s tweet buttons, Facebook recommendation widget, Google Plus follow buttons, the Plus one buttons – all of this had to be killed.

Here are some reasons why I decided to do this

Why I removed Social Sharing Buttons From this website

  • Facebook Like buttons takes a long time to load and its not a good user experience.
  • The tweet and Like buttons are not symmetric and they look a little ugly when placed side by side.
  • If the user is browsing this site on a slow connection, these buttons are the real culprits why the page hangs in the middle.
  • The content on this site does not get hundreds of “shares”, so the sharing buttons are not very useful from where we are standing now.

Regardless of the above reasons, I wanted to keep the sharing buttons on the following grounds

  • There will not be any JS / CSS calls by these buttons.
  • The social sharing buttons should use the minimum resources (e.g no separate images or CSS sprites).

The only way to integrate social sharing buttons without images, JS was to design it with CSS and load the sharing URL’s in a new browser tab.

If you want social media sharing buttons for your website that is designed with only CSS, here is the code you may want to use.

1. Paste this in your style.css file of before the ending head tag (</head> ) of the webpage

[class*=zocial-]:before{font-family:zocial, sans-serif}
.share-below{margin-bottom:55px;margin-top:45px}
.share-below h4{text-transform:uppercase;text-align:center;font-size:60px;color:#565656;font-family:Impact;letter-spacing:1px;margin-bottom:30px}
.share-below a{text-decoration:none}
.share-below ul{list-style:none;width:620px;margin:0 0 0 85px;padding:0}
.clearfix{zoom:1}
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both}
.action-bar li{float:left;margin-right:60px}
.action-bar a{color:#e7e7e7;display:block;font-size:32px;height:64px;line-height:64px;position:relative;text-align:center;-webkit-transition:background .3s;-moz-transition:background .3s;-ms-transition:background .3s;-o-transition:background .3s;transition:background .3s;width:64px}
.action-bar a:hover .tooltip{margin-top:16px;opacity:1}
.tooltip{border-radius:3px;font-size:14px;height:28px;left:50%;line-height:28px;opacity:0;position:absolute;top:100%;-webkit-transition:margin-top .3s, opacity .3s;-moz-transition:margin-top .3s, opacity .3s;-ms-transition:margin-top .3s, opacity .3s;-o-transition:margin-top .3s, opacity .3s;transition:margin-top .3s, opacity .3s;width:100px;font-family:verdana;margin:0 0 0 -50px}
.tooltip:before{content:"";height:8px;left:50%;position:absolute;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);width:8px;margin:-4px 0 0 -4px}
.favourite,.favourite .tooltip,.favourite .tooltip:before{background:#c93037}
.favourite:hover{background:#b02b32}
.comment,.comment .tooltip,.comment .tooltip:before{background:#43438e}
.comment:hover{background:#393978}

2. Add this code before the ending head tag (</head>) of the webpage

<style type="text/css">
@import url(http://weloveiconfonts.com/api/?family=zocial);
</style>

3. Finally the HTML and PHP code which you need to add to your website’s page. If you’re using self hosted WordPress, the following code should work just as fine:

<!--Social sharing-->
<div class="share-below">
<h4>Share this article</h4>
<ul class="action-bar clearfix">
<li>
<a rel="nofollow" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink();?>" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like it</span>
</a>
</li>
<li><a rel="nofollow" target="_blank" href="http://twitter.com/share?url=<?php the_permalink();?>&text=<?php the_title();?>" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Tweet this</span>
</a>
</li>

<li><a rel="nofollow" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink();?>" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Share it</span>
</a>
</li>

<li>
<a rel="nofollow" target="_blank" href=”” class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>
<!-- Social Sharing ends -->

Note: It is recommended to copy the above code in a text editor and replace the double quotes manually before you implement the same in your website’s theme.

The above code does not use any image or JS or jQuery. You may note a tooltip style message is shown when you hover the mouse cursor over any of the icons. This tooltip is done with CSS only and there is absolutely no need of using any JavaScript at all.

Implementing social media sharing buttons using only CSS was very useful from the usability point of view. The next thing on my cards is to implement asynchoronous loading of different elements, I will be explaining the same in a future post (once I have successfully implemented it on this website).

Amit Banerjee is the founding editor and owner of Ampercent. He is a die hard technology enthusiast and writes about all things technology, How to guides, tutorials and search engines. Follow him on Twitter, read his personal blog or drop him an email.