.github-grey{background-color:#eaeaea;background-image:-webkit-gradient(linear,left 0,left 100%,from(#f9f9f9),to(#eaeaea));background-image:-webkit-linear-gradient(top,#f9f9f9,0,#eaeaea,100%);background-image:-moz-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#eaeaea 100%);background-repeat:repeat-x;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #c5c5c5;border-right:1px solid #ddd;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff9f9f9′, endColorstr=’#ffeaeaea’, GradientType=0);border-radius:2px;text-align:center;color:#333;font-weight:700}.github-red{background-color:#eaeaea;background-image:-webkit-gradient(linear,left 0,left 100%,from(#f9f9f9),to(#eaeaea));background-image:-webkit-linear-gradient(top,#f9f9f9,0,#eaeaea,100%);background-image:-moz-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#eaeaea 100%);background-repeat:repeat-x;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #c5c5c5;border-right:1px solid #ddd;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff9f9f9′, endColorstr=’#ffeaeaea’, GradientType=0);border-radius:2px;text-align:center;color:#900;font-weight:700}.github-gold{background-color:#e6e1c0;background-image:-webkit-gradient(linear,left 0,left 100%,from(#fef9d4),to(#e6e1c0));background-image:-webkit-linear-gradient(top,#fef9d4,0,#e6e1c0,100%);background-image:-moz-linear-gradient(top,#fef9d4 0,#e6e1c0 100%);background-image:linear-gradient(to bottom,#fef9d4 0,#e6e1c0 100%);background-repeat:repeat-x;border-top:1px solid #ddd7aa;border-left:1px solid #ddd7aa;border-bottom:1px solid #ccc27e;border-right:1px solid #ddd7aa;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fffef9d4′, endColorstr=’#ffe6e1c0′, GradientType=0);border-radius:2px;text-align:center;color:#333;font-weight:700}.github-green{background-color:#61b145;background-image:-webkit-gradient(linear,left 0,left 100%,from(#89dc6c),to(#61b145));background-image:-webkit-linear-gradient(top,#89dc6c,0,#61b145,100%);background-image:-moz-linear-gradient(top,#89dc6c 0,#61b145 100%);background-image:linear-gradient(to bottom,#89dc6c 0,#61b145 100%);background-repeat:repeat-x;border-top:1px solid #5ca941;border-left:1px solid #5ca941;border-bottom:1px solid #5ca941;border-right:1px solid #5ca941;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff89dc6c’, endColorstr=’#ff61b145′, GradientType=0);border-radius:2px;text-align:center;color:#fff;font-weight:700}a.github-red:hover{background-color:#b43731;background-image:-webkit-gradient(linear,left 0,left 100%,from(#db5e58),to(#b43731));background-image:-webkit-linear-gradient(top,#db5e58,0,#b43731,100%);background-image:-moz-linear-gradient(top,#db5e58 0,#b43731 100%);background-image:linear-gradient(to bottom,#db5e58 0,#b43731 100%);background-repeat:repeat-x;border-top:1px solid #cd504a;border-left:1px solid #cd504a;border-bottom:1px solid #cd504a;border-right:1px solid #cd504a;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffdb5e58′, endColorstr=’#ffb43731′, GradientType=0);color:#fff}a.github-green:hover{background-color:#579f3e;background-image:-webkit-gradient(linear,left 0,left 100%,from(#78d757),to(#579f3e));background-image:-webkit-linear-gradient(top,#78d757,0,#579f3e,100%);background-image:-moz-linear-gradient(top,#78d757 0,#579f3e 100%);background-image:linear-gradient(to bottom,#78d757 0,#579f3e 100%);background-repeat:repeat-x;border-top:1px solid #4a993e;border-left:1px solid #4a993e;border-bottom:1px solid #4a993e;border-right:1px solid #4a993e;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff78d757′, endColorstr=’#ff579f3e’, GradientType=0);color:#fff}a.github-grey:hover{background-color:#dadada;background-image:-webkit-gradient(linear,left 0,left 100%,from(#e9e9e9),to(#dadada));background-image:-webkit-linear-gradient(top,#e9e9e9,0,#dadada,100%);background-image:-moz-linear-gradient(top,#e9e9e9 0,#dadada 100%);background-image:linear-gradient(to bottom,#e9e9e9 0,#dadada 100%);background-repeat:repeat-x;border-top:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #b5b5b5;border-right:1px solid #ccc;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffe9e9e9′, endColorstr=’#ffdadada’, GradientType=0);color:#333}a.github-gold:hover{background-color:#dadada;background-image:-webkit-gradient(linear,left 0,left 100%,from(#fef6bb),to(#dfd8ae));background-image:-webkit-linear-gradient(top,#fef6bb,0,#dfd8ae,100%);background-image:-moz-linear-gradient(top,#fef6bb 0,#dfd8ae 100%);background-image:linear-gradient(to bottom,#fef6bb 0,#dfd8ae 100%);background-repeat:repeat-x;border-top:1px solid #d5cc94;border-left:1px solid #d5cc94;border-bottom:1px solid #ab9d44;border-right:1px solid #d5cc94;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fffef6bb’, endColorstr=’#ffdfd8ae’, GradientType=0);color:#000}In a previous post I showed how you can use Twitter’s Bootstrap front-end framework to create beautiful Facebook style buttons. Similarly in this post, I will show you how-to create beautiful GitHub inspired buttons.

Examples

Here is an example of what the buttons will look like in the end:

Grey Button  Grey Button  Gold Button  Green Button

The CSS Classes

We will need to create four (4) CSS classes and these classes will also have a hover class for each.

In each class, there are common CSS properties: gradient background, border, border radius, text align, font colour and font weight. I’ve excluded the border radius, text align and font weight properties from the hover classes because it’ll inherit the value from the primary CSS class.

Let’s start with the gray button that has the black text. Here is the CSS for it and the corresponding hover class:

.github-grey { background-color: #eaeaea; background-image: -webkit-gradient(linear, left 0, left 100%, from(#f9f9f9), to(#eaeaea)); background-image: -webkit-linear-gradient(top, #f9f9f9, 0, #eaeaea, 100%); background-image: -moz-linear-gradient(top, #f9f9f9 0, #eaeaea 100%); background-image: linear-gradient(to bottom, #f9f9f9 0, #eaeaea 100%); background-repeat: repeat-x; border-top:1px solid #dddddd; border-left:1px solid #dddddd; border-bottom:1px solid #c5c5c5; border-right:1px solid #dddddd; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#ffeaeaea', GradientType=0); border-radius:2px; text-align:center; color:#333; font-weight:bold; }
a.github-grey:hover { background-color: #dadada; background-image: -webkit-gradient(linear, left 0, left 100%, from(#e9e9e9), to(#dadada)); background-image: -webkit-linear-gradient(top, #e9e9e9, 0, #dadada, 100%); background-image: -moz-linear-gradient(top, #e9e9e9 0, #dadada 100%); background-image: linear-gradient(to bottom, #e9e9e9 0, #dadada 100%); background-repeat: repeat-x; border-top:1px solid #ccc; border-left:1px solid #ccc; border-bottom:1px solid #b5b5b5; border-right:1px solid #ccc; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe9e9e9', endColorstr='#ffdadada', GradientType=0); color:#333; }

Let’s move on to the grey button with the red text and when you hover over it, it turns red.

.github-red { background-color: #eaeaea; background-image: -webkit-gradient(linear, left 0, left 100%, from(#f9f9f9), to(#eaeaea)); background-image: -webkit-linear-gradient(top, #f9f9f9, 0, #eaeaea, 100%); background-image: -moz-linear-gradient(top, #f9f9f9 0, #eaeaea 100%); background-image: linear-gradient(to bottom, #f9f9f9 0, #eaeaea 100%); background-repeat: repeat-x; border-top:1px solid #dddddd; border-left:1px solid #dddddd; border-bottom:1px solid #c5c5c5; border-right:1px solid #dddddd; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#ffeaeaea', GradientType=0); border-radius:2px; text-align:center; color:#990000; font-weight:bold; }
a.github-red:hover { background-color: #b43731; background-image: -webkit-gradient(linear, left 0, left 100%, from(#db5e58), to(#b43731)); background-image: -webkit-linear-gradient(top, #db5e58, 0, #b43731, 100%); background-image: -moz-linear-gradient(top, #db5e58 0, #b43731 100%); background-image: linear-gradient(to bottom, #db5e58 0, #b43731 100%); background-repeat: repeat-x; border-top:1px solid #cd504a; border-left:1px solid #cd504a; border-bottom:1px solid #cd504a; border-right:1px solid #cd504a; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdb5e58', endColorstr='#ffb43731', GradientType=0); color:#fff; }

Now we are half way there and we are done with the two (2) grey buttons. Let’s start with the green button.

.github-green { background-color: #61b145; background-image: -webkit-gradient(linear, left 0, left 100%, from(#89dc6c), to(#61b145)); background-image: -webkit-linear-gradient(top, #89dc6c, 0, #61b145, 100%); background-image: -moz-linear-gradient(top, #89dc6c 0, #61b145 100%); background-image: linear-gradient(to bottom, #89dc6c 0, #61b145 100%); background-repeat: repeat-x; border-top:1px solid #5ca941; border-left:1px solid #5ca941; border-bottom:1px solid #5ca941; border-right:1px solid #5ca941; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89dc6c', endColorstr='#ff61b145', GradientType=0); border-radius:2px; text-align:center; color:#fff; font-weight:bold; }
a.github-green:hover { background-color: #579f3e; background-image: -webkit-gradient(linear, left 0, left 100%, from(#78d757), to(#579f3e)); background-image: -webkit-linear-gradient(top, #78d757, 0, #579f3e, 100%); background-image: -moz-linear-gradient(top, #78d757 0, #579f3e 100%); background-image: linear-gradient(to bottom, #78d757 0, #579f3e 100%); background-repeat: repeat-x; border-top:1px solid #4a993e; border-left:1px solid #4a993e; border-bottom:1px solid #4a993e; border-right:1px solid #4a993e; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff78d757', endColorstr='#ff579f3e', GradientType=0); color:#fff; }

Lastly we have the gold button, which you could also consider yellow. Here is the CSS class and the corresponding hover class:

.github-gold { background-color: #e6e1c0; background-image: -webkit-gradient(linear, left 0, left 100%, from(#fef9d4), to(#e6e1c0)); background-image: -webkit-linear-gradient(top, #fef9d4, 0, #e6e1c0, 100%); background-image: -moz-linear-gradient(top, #fef9d4 0, #e6e1c0 100%); background-image: linear-gradient(to bottom, #fef9d4 0, #e6e1c0 100%); background-repeat: repeat-x; border-top:1px solid #ddd7aa; border-left:1px solid #ddd7aa; border-bottom:1px solid #ccc27e; border-right:1px solid #ddd7aa; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffef9d4', endColorstr='#ffe6e1c0', GradientType=0); border-radius:2px; text-align:center; color:#333; font-weight:bold; }
a.github-gold:hover { background-color: #dadada; background-image: -webkit-gradient(linear, left 0, left 100%, from(#fef6bb), to(#dfd8ae)); background-image: -webkit-linear-gradient(top, #fef6bb, 0, #dfd8ae, 100%); background-image: -moz-linear-gradient(top, #fef6bb 0, #dfd8ae 100%); background-image: linear-gradient(to bottom, #fef6bb 0, #dfd8ae 100%); background-repeat: repeat-x; border-top:1px solid #d5cc94; border-left:1px solid #d5cc94; border-bottom:1px solid #ab9d44; border-right:1px solid #d5cc94; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffef6bb', endColorstr='#ffdfd8ae', GradientType=0); color:#000; }

Ta-da, you’re done with the CSS. Now, let’s go to the next section, where I’ll teach you how-to add it to your website.

Add to Your Website

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

Grey Button

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

Grey Button with Red Text

<a href="#" title="" class="btn github-red">Grey Button</a>

Gold Button

<a href="#" title="" class="btn github-gold">Gold Button</a>

Green Button

<a href="#" title="" class="btn github-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.

Get the code

I’ve created a GitHub repository where you can get the code and CSS file. Click on the button below to download it.

Download (zip)