Along the same lines as last week’s post about Customizing the Share Link, you can also change the appearance of the Friend Invite Widget link.  After you add an Friend Invite Widget to your tab, you would use the following CSS to style it:

.ss_friend_invite a{
border: solid 1px #000000; /* border color, size, and line style */
background:#dd0000; /* background color of the Friend Invite link */
font-family: arial, sans-serif; /* font-family determines the web-safe font used for the link name */
color:#ffffff; /* color of the text in the Friend Invite link */
font-size: 14px; /* size of the text in the Friend Invite link */
border-radius: 3px; /* creates rounded corners, for a more button-like look.  The larger the number, the more rounded the corners.  If you don’t want rounded corners, change the border-radius to 0px */
padding:5px; /* amount of space between the text and the border of the button */
}

You can even change the color of the button when you hover over the Friend Invite link, here’s the CSS:

.ss_friend_invite a:hover{
background:#000000; /* background color of the Friend Invite link when you hover over it */
}

You can change the Hex Values, pixel dimensions, border styles, and the font-family to suit your tab.  The above is the CSS that would create a Friend Invite button that matches your Share buttons. As always, here are a few great references to help you customize:

Hex Value Guide:  http://www.w3schools.com/cssref/css_colorsfull.asp
Guide to web-safe fonts:  http://www.w3schools.com/cssref/css_websafe_fonts.asp.

Want more CSS Tips?  Sign-up for our monthly ShortStack Tricks and CSS Tips email, just click here.