Why do Bootstrap components appear nicer on FontAwesome website?

Question

I'm wondering why components appear nicer on FontAwesome's website then in mine (it's not yet online, so you cannot see yourself... but you can check Bootstrap's website's button section).

I just tried to cut and paste the snippet for the delete button (the one in red) at the example page and the look and feel is not the same: of course the font is different, but I also notice that nice light/shadow effect on the borders of the button is clearer than on buttons made with Bootstrap.

I thought, there must be an additional external component able to give that look and feel to the button, but I'd like to know what it is. I checked the source and I noticed the reference to a library from typekit.com that could have been a candidate to the answer I'm looking for, but it seems to be about fonts.

Another option is the author of FA website pimped Bootstrap CSS or JS to give that effect, but after checking the source I found nothing.

Any idea how to get the same light/shadow effect on button borders?

Answer 1

If you whip out your handy document inspector (F12 in Windows), you can see that Font Awesome has applied their fonts to Bootstrap's button, which contains CSS like the following:

.btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-info {
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

This adds the text shadow of which you speak. Borders are similarly styled by Bootstrap:

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

Other variations may be due to differing Bootstrap versions, overriding custom CSS, etc.