Custom Facebook button style

I recently was doing some Facebook integration work, and wanted to make a nice "Connect to Facebook" button, but didn't want to use the Facebook JS SDK. So here's a simple CSS & image style to make a facebook button

css style:

.facebook_button {
    display: inline-block;

    background: #627aac url(facebook_small.png) left no-repeat;

    border-top: 1px solid #29447e;
    border-right: 1px solid #29447e;
    border-bottom: 1px solid #1a356e;
    border-left: none;

    height: 22px;

    padding-right: 7px;
    padding-left: 29px;

    font-weight: bold;
    font-size: 11px;
    color: white;
    text-decoration: none;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
    line-height: 22px;

    cursor: pointer;


All you need is this little facebook icon:

Use it like so:

<button class="facebook_button">Connect to Facebook</button>

It looks like this:

Using a CSS style over a raw image is that you can easily change the content inside the button, e.g.:

This entry is tagged: