I don’t like to see the twitter button floating alone so i decided to design a custom badge with the colors palette of the official twitter website.A good way to improve your design on the website and make it more visibile for your users.One of the problem of blogs, common blogs is the difficulty to find immediately the twitter button or the facebook like button.A good rule for design is to make everything easy sexy and reacheable at the same time, so, why don’t try ?

So let’s start this tutorial.

Create the HTML strutcture

The first thing to understand is the HTML structure.It’s not complicated. A general div called “badge” and two different div class inside called respectively : “text” for the text and “button” for the twitter count button.

<div id="badge">

<div class="text">
<li class="high">Re-tweet</li>
<li>to your followers</li>
</div>

<div class="button">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" >Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

</div>

Inside the div “text” we will insert the text “retweet to your followers ” with a list and we specify the text “retweet” with a class high to emphasize the text.
For the twitter button i choose the horizontal one who display the number of tweets.You can customize it from the official twitter page.

Let’s dress the style: CSS3

First of all we need the official twitter color palette.So i grab the code color from the homepage of twitter.

Now we can apply the css style to our elements

#badge{width:160px;  box-shadow: 0px 1px 3px #bbb;  
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius:5px;-khtml-border-radius:5px; 
}
#badge li {list-style:none; display:inline; font-size:10px; color:#c1deee;}
#badge li.high{ font-size:12px; color:#fff; font-weight:bold; text-shadow:0px 1px 0px #000; text-transform:uppercase; }

.text{background:#0093bf;   height:20px; line-height:20px; padding:5px 5px;
border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -khtml-border-radius-topleft:5px;
border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -khtml-border-radius-topright:5px;
 }
 
.button{ border-top:1px solid #fff;  background:#ddeef6; height:20px; padding:5px 5px;  
border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft:5px;
border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright:5px;
}

The width of the badge now is 160px but the badge can be more or less larger depends of your needs.
To look up more cool i used a box shadow for and border radius but if you don’t like you can delete it.

And Facebook ?

Take it easy man.

The only thing to change on the html structure is the button and the text.We need to grab the code for the Facebook like button from the developer page.

<div id="badge">

<div class="text">
<li class="high">Share</li>
<li>to your friends</li>
</div>

<div class="button">
<iframe src="http://www.facebook.com/plugins/like.php?href&amp;layout=button_count&amp;show_faces=true&amp;width=160&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:160px; height:21px;" allowTransparency="true"></iframe>
</div>

</div>

Of course the style, just replace the background colors:

#badge{width:160px;  box-shadow: 0px 1px 3px #bbb;  
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius:5px;-khtml-border-radius:5px; 
}
#badge li {list-style:none; display:inline; font-size:10px; color:#c1deee;}
#badge li.high{ font-size:12px; color:#fff; font-weight:bold; text-shadow:0px 1px 0px #000; text-transform:uppercase; }

.text{background:#3b5999;   height:20px; line-height:20px; padding:5px 5px;
border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -khtml-border-radius-topleft:5px;
border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -khtml-border-radius-topright:5px;
 }
 
.button{ border-top:1px solid #fff;  background:#f2f2f2; height:20px; padding:5px 5px;  
border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft:5px;
border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright:5px;
}

Now your facebook and twitter button look more cool.