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.: