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.