In this tutorial I’m going to show you how-to create a Twitter button for the Bootstrap front-end framework using Sass and Font Awesome.

HTML

To add the Twitter Bootstrap button to your website, use the following HTML code:

<a href="http://twitter.com/home?status=" title="Share on Twitter" target="_blank" class="btn btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>

You can add Bootstrap’s button sizing classes after btn-twitter in the a class attribute. So, it would look like this:

<a href="http://twitter.com/home?status=" title="Share on Twitter" target="_blank" class="btn btn-twitter btn-lg"><i class="fa fa-twitter"></i> Twitter</a>

In the above example, we should the large Bootstrap button class. You can also use btn-sm for small buttons and btn-xs for extra-small buttons.

Sass

Firstly, let’s state and define some variables:

$btn-twitter-bg: #00ACEE;
$btn-link-color: #fff;
$btn-darken: 15%;
$btn-lighten: 15%;

Next, let’s make the Sass code for the button itself:

.btn-twitter {
    background: $btn-twitter-bg;
    color: $btn-link-color;
    @include border(1px, solid, darken($btn-twitter-bg, $btn-darken));
}
.btn-twitter:link, .btn-twitter:visited {
    color: $btn-link-color;
}
.btn-twitter:active, .btn-twitter:hover {
    background: darken($btn-twitter-bg, $btn-darken);
    color: $btn-link-color;
}

On line four (4), you will see the following:

@include border(1px, solid, darken($btn-twitter-bg, $btn-darken));

We are using a border mixin. You don’t have to use a mixin if you don’t want to but you might find it useful for other parts of your code. You also don’t have to have a border.

The border mixin code is:

@mixin border($width, $style, $color) {
  border-width: $width;
  border-style: $style;
  border-color: $color;
}

We are also darkening the border. The border colour is based on the buttons colour. You can also lighten the border colour like so:

@include border(1px, solid, lighten($btn-twitter-bg, $btn-lighten));

On line 10, when the button is hovered or active, we are also darkening the button based on the default button colour. We can also make the button lighter when hovered or active.

It was:

background: darken($btn-twitter-bg, $btn-darken);

Change it to:

background: lighten($btn-twitter-bg, $btn-lighten);

You can change how much the button is ligtened or darkened, by changing the $btn-darken or $btn-lighten variable, which by default is 15%.

We can also make the button have a raised or 3D effect, using the following code:

Raised button – add btn-raised to the HTML code:

.btn-raised {
  box-shadow: inset 0 -1.2px rgba(0, 0, 0, 0.12);
  outline: none;
  -webkit-outline: none;
  -o-outline: none;
  -moz-outline: none;
}

3D button – add btn-3d to the HTML code:

.btn-3d {
  box-shadow: inset 0 -3.2px rgba(0, 0, 0, 0.12), inset 2px 0 rgba(0, 0, 0, 0.1);
  outline: none;
  -webkit-outline: none;
  -o-outline: none;
  -moz-outline: none;
}

Add Font Awesome Icons

You can add Font Awesome‘s font icons to your website either by going to their website, downloading it and then linking the stylesheet, such as:

<link rel="stylesheet" type="text/css" href="path-to/font-awesome.min.css" />

Use the minified version of Font Awesome, as there is no need to use the unminified version for a live website.

You can also use a free hosted CDN like BootstrapCDN.

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

The current version of Font Awesome is 4.3.0. Make sure you use the latest version of Font Awesome, which you can find on the BootstrapCDN website.