Make the “Facebook Connect” Button in Your Forms and Promos Stand Out

Customize the Facebook Connect Button in Forms and Promos

Make the “Facebook Connect” Button in Your Forms and Promos Stand Out

Are people not seeing the Login with Facebook button in your Promotion form? Use some CSS to draw more attention to it! Customizing the appearance of this button is much like styling the Share and Invite Friends buttons, with just some tiny tweaks.

/*Facebook Connect Button*/
.ss_box .facebook_id_field_block a{
color:#ff00ff;
 /*font color*/
background:#ffff00; /*button color*/
border: solid 1px #000000; /* border color, size, and line style */
font-family: arial, sans-serif; /* font-family determines the web-safe font used for the button name */
font-size: 14px; /* size of the text in the Facebook Connect Button */
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 */
}

/*Facebook Connect Button Hover*/
.ss_box .facebook_id_field_block
 a:hover{

background:#dd0000; /* background color of the Facebook Connect Button when you hover over it */
}

As with the Share and Invite Friends buttons, 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. Check out the following resources from w3schools.com for some sweet color and font guides:

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

Sign-up for our monthly ShortStack Tricks and CSS Tips email to get tips like this delivered right to your inbox, just click here.

Dana Kilroy
dana@shortstacklab.com

Dana Sullivan Kilroy is ShortStack's Director of Communications and Social Media Marketing. Before joining the ShortStack team she was a writer whose work appeared in publications and sites including The New York Times, The Los Angeles Times, The Wall Street Journal, Fast Company, Inc. and many other lifestyle publications. Reach her on Twitter @dsullyk. Read more articles by Dana Kilroy.



You’re going to love ShortStack

0 Shares
Share
Tweet
Share