Social Buttons

author     date09/22/2012     date3 Comments

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.

3 Responses to “Social Buttons”

  • Michel 09/22/2012 at 8:03 pm

    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?…

    • The Fireworks Police 09/23/2012 at 8:38 pm

      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.

      • Michel 09/25/2012 at 8:03 am

        Ahh, I see. Thanks for the clarification! :)

Leave a Comment

You must be logged in to post a comment.


Premium HTML & Fireworks Resources

Get your hands on premium resources that will make your job much easier.