Social Buttons

There are many social buttons out there on the web, but not many tell you if are already following the person/company. Today we’re happy to bring you a set of simple social buttons that does exactly that. With this social buttons set, you have the button’s normal state on the left, and active on the right. As you can see in the preview, the active state highlights the colors of the social network. When coding, the idea is to make it so that the active state buttons are not click-able. The button design was inspired by Twitter button by PurtyPixels.

The design for the buttons are fairly simple.

  1. We start with a 170px by 30px rectangle with a roundness of 3px.
  2. Then used a simple linear gradient from #FAFAFA to #E1E1E1 and added a 1px solid border with #AAAAAA.
  3. The social icons used can be downloaded from their respective site.
  4. The little fading line is a rectangle that is 1px by 20px and has x-y controlled circle vector masking.
  5. The font we used is Open Sans ranging from semi-bold to bold font-weight (11pt font-size).
  6. Finally for the active state, we changed the border color and the color of the social vector.


Hey there. I’m Sazzad, a User Experience Developer from New York City. I work with many talented folks who find ways of re-inventing the way users look at the web. I am the founder of the FWPolice and co-founder of Fleech Media. You can follow me on Twitter by the handle @IamShipon1988 .


  • Michel says:

    Buttons are very nice! 🙂

    //sidenote: The screenshot of the buttons looks “fuzzy” (blurry) in latest Firefox. Perhaps it is not displayed at 1:1 but is scaled in the browser?…

    • Yes some images are not displayed 1:1. The reason behind is the conversion from a theme that is 688px wide to 760px. The change would require us to re-make all the images manually thereby delaying the release. So we decided to release the site first with the old images and then upload a better resolution image as we go along.

Leave a Reply

Your email address will not be published.