The following is a Bootstrap code snippet that hooks onto the .btn CSS class to create Facebook styled buttons. There are three different colors that the Facebook buttons come in: grey, green and purple.

The CSS Classes

Let’s start by making the grey button. Here is the CSS:

.fb-grey { background-color: #efeff0; background-image: -webkit-gradient(linear, left 0, left 100%, from(#fdfdfd), to(#efeff0)); background-image: -webkit-linear-gradient(top, #fdfdfd, 0, #efeff0, 100%); background-image: -moz-linear-gradient(top, #fdfdfd 0, #efeff0 100%); background-image: linear-gradient(to bottom, #fdfdfd 0, #efeff0 100%); background-repeat: repeat-x; border-top: 1px solid #a6a6a6; border-left: 1px solid #959595; border-bottom: 1px solid #959595; border-right: 1px solid #959595; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffdfdfd', endColorstr='#ffefeff0', GradientType=0); border-radius: 0px; text-align: center; color: #505050; font-weight: bold; }

Now let’s create the purple Facebook button.

.fb-purple { background-color: #5872a7; background-image: -webkit-gradient(linear, left 0, left 100%, from(#637bad), to(#5872a7)); background-image: -webkit-linear-gradient(top, #637bad, 0, #5872a7, 100%); background-image: -moz-linear-gradient(top, #637bad, #5872a7 100%); background-image: linear-gradient(to bottom, #637bad, #5872a7 100%); background-repeat: repeat-x; border-top: 1px solid #29447e; border-left: 1px solid #29447e; border-bottom: 1px solid #1a356e; border-right: 1px solid #29447e; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff637bad', endColorstr='#ff5872a7', GradientType=0); border-radius: 0px; text-align: center; color: #fff; font-weight: bold; }

Here is the last Facebook button colour, green.

.fb-green { background-color: #67a54b; background-image: -webkit-gradient(linear, left 0, left 100%, from(#75ae5c), to(#67a54b)); background-image: -webkit-linear-gradient(top, #75ae5c, 0, #67a54b, 100%); background-image: -moz-linear-gradient(top, #75ae5c0, #67a54b 100%); background-image: linear-gradient(to bottom, #75ae5c0, #67a54b 100%); background-repeat: repeat-x; border-top: 1px solid #3b6e22; border-left: 1px solid #3b6e22; border-bottom: 1px solid #2c5115; border-right: 1px solid #3b6e22; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff75ae5c', endColorstr='#ff67a54b', GradientType=0); border-radius: 0px; text-align: center; color: #fff; font-weight: bold; }

Finally, we have to adjust the link hover colour, because it uses Bootstrap’s colour, which is a medium black. This is how you do it:

 a.fb-grey:hover { color: #505050; } a.fb-green:hover, a.fb-purple:hover { color: #fff; }

The link hover colour matches the link colour. In order to do this, I created two different CSS classes: one for the grey button since it uses a shade of black and another for the green and purple button, which is white.

Add to Your Website

To add the Facebook buttons to your website, simply add the .btn and fb-
CSS classes to your links or buttons, like so:

Grey Button

<a href="#" title="" class="btn fb-grey">Grey Button</a>

Purple Button

<a href="#" title="" class="btn fb-purple">Purple Button</a>

Green Button

<a href="#" title="" class="btn fb-green">Green Button</a>

This code snippet does not touch the button sizing classes, so you are free to change the size of the buttons to small and large, with no problems.