GitHub Fork Button
The GitHub fork button is a special button which are linked to repository of your software at GitHub.com. In this article you will learn how to add a GitHub fork button to your website’s or blog’s post, using just code (HTML, CSS & SVG), without any images files. The design of button and GitHub icon will be generated by code.
For first we need a design. I took advantage the design of active button created by Matt Boldt. The code of his button are under the MIT license and can be found at http://www.devkit.co/tools/3-css-svg-social-button-generator/.
There is a HTML code of button by Matt Boldt:
<a href="#" class="sc-btn sc--github">
<span class="sc-icon"><svg viewBox="0 0 33 33" width="25" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 16,0C 7.163,0,0,7.163,0,16s 7.163,16, 16,16s 16-7.163, 16-16S 24.837,0, 16,0z M 25.502,25.502 c-1.235,1.235-2.672,2.204-4.272,2.881c-0.406,0.172-0.819,0.323-1.238,0.453L 19.992,26.438 c0-1.26-0.432-2.188-1.297-2.781 c 0.542-0.052, 1.039-0.125, 1.492-0.219s 0.932-0.229, 1.438-0.406s 0.958-0.388, 1.359-0.633s 0.786-0.563, 1.156-0.953s 0.68-0.833, 0.93-1.328 s 0.448-1.089, 0.594-1.781s 0.219-1.456, 0.219-2.289c0-1.615-0.526-2.99-1.578-4.125c 0.479-1.25, 0.427-2.609-0.156-4.078l-0.391-0.047 c-0.271-0.031-0.758,0.083-1.461,0.344s-1.492,0.688-2.367,1.281c-1.24-0.344-2.526-0.516-3.859-0.516c-1.344,0-2.625,0.172-3.844,0.516 c-0.552-0.375-1.075-0.685-1.57-0.93c-0.495-0.245-0.891-0.411-1.188-0.5s-0.573-0.143-0.828-0.164s-0.419-0.026-0.492-0.016 s-0.125,0.021-0.156,0.031c-0.583,1.479-0.635,2.839-0.156,4.078c-1.052,1.135-1.578,2.51-1.578,4.125c0,0.833, 0.073,1.596, 0.219,2.289 s 0.344,1.286, 0.594,1.781s 0.56,0.938, 0.93,1.328s 0.755,0.708, 1.156,0.953s 0.854,0.456, 1.359,0.633s 0.984,0.313, 1.438,0.406 s 0.951,0.167, 1.492,0.219c-0.854,0.583-1.281,1.51-1.281,2.781l0,2.445 c-0.472-0.14-0.937-0.306-1.394-0.5 c-1.6-0.677-3.037-1.646-4.272-2.881c-1.235-1.235-2.204-2.672-2.881-4.272C 2.917,19.575, 2.563,17.815, 2.563,16 s 0.355-3.575, 1.055-5.23c 0.677-1.6, 1.646-3.037, 2.881-4.272s 2.672-2.204, 4.272-2.881 C 12.425,2.917, 14.185,2.563, 16,2.563s 3.575,0.355, 5.23,1.055c 1.6,0.677, 3.037,1.646, 4.272,2.881 c 1.235,1.235, 2.204,2.672, 2.881,4.272C 29.083,12.425, 29.438,14.185, 29.438,16s-0.355,3.575-1.055,5.23 C 27.706,22.829, 26.737,24.267, 25.502,25.502z"></path></g></svg></span>
<span class=sc-text>Fork on Github</span>
</a>
And there is a styles for it:
.sc-btn {
display: inline-block;
position: relative;
margin: 0 .25em .5em 0;
padding: 0;
color: #fff;
font-family: "Helvetica Neue", "Helvetica", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1em;
text-decoration: none;
text-shadow: rgba(0, 0, 0, 0.3) 0px -0.1em 0px;
border: 0;
border-radius: 0.4em;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
-ms-border-radius: 0.4em;
-o-border-radius: 0.4em;
background-color: #1a1a1a;
background-image: -webkit-linear-gradient(top, #595959, #1a1a1a 100%);
background-image: -moz-linear-gradient(top, #595959, #1a1a1a);
background-image: -ms-linear-gradient(top, #595959, #1a1a1a);
background-image: -o-linear-gradient(top, #595959, #1a1a1a);
background-image: linear-gradient(to bottom, #595959, #1a1a1a);
box-shadow: inset rgba(0, 0, 0, 0.1) 0px -0.15em 0px, inset rgba(255, 255, 255, 0.2) 0px 0.15em 0px, rgba(0, 0, 0, 0.3) 0px 0.1em 0.3em;
text-align: center;
background-repeat: no-repeat;
-webkit-transition: background-position .1s ease-in-out;
-webkit-appearance: none;
cursor: pointer;
overflow: hidden; }
.sc-btn:hover {
color: #fff; }
.sc-btn:active {
box-shadow: rgba(255, 255, 255, 0.2) 0 0.1em 0, inset rgba(0, 0, 0, 0.3) 0px 0.25em 1em; }
.sc-icon,
.sc-text {
display: block;
float: left; }
.sc-icon {
margin: 0 -.4em 0 0;
padding: 0.6em .8em .5em;
border-right: rgba(255, 255, 255, 0.1) 0.1em solid;
box-shadow: inset rgba(0, 0, 0, 0.1) -0.1em 0px 0px; }
.sc-text {
padding: .95em 1em .85em 1em;
font-size: 1.15em;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif; }
.sc--github {
background-color: #3269a0;
background-image: -webkit-linear-gradient(top, #689cd0, #3269a0 100%);
background-image: -moz-linear-gradient(top, #689cd0, #3269a0);
background-image: -ms-linear-gradient(top, #689cd0, #3269a0);
background-image: -o-linear-gradient(top, #689cd0, #3269a0);
background-image: linear-gradient(to bottom, #689cd0, #3269a0); }
.sc--github:hover {
background-color: #2f6498;
background-image: -webkit-linear-gradient(top, #7ba9d6, #2f6498 90%);
background-image: -moz-linear-gradient(top, #7ba9d6, #2f6498);
background-image: -ms-linear-gradient(top, #7ba9d6, #2f6498);
background-image: -o-linear-gradient(top, #7ba9d6, #2f6498);
background-image: linear-gradient(to bottom, #7ba9d6, #2f6498);
background-color: #4988c6; }
.sc--github:active {
background-color: #3269a0;
background-image: -webkit-linear-gradient(top, #5490ca, #3269a0 100%);
background-image: -moz-linear-gradient(top, #5490ca, #3269a0);
background-image: -ms-linear-gradient(top, #5490ca, #3269a0);
background-image: -o-linear-gradient(top, #5490ca, #3269a0);
background-image: linear-gradient(to bottom, #5490ca, #3269a0); }
.sc-btn svg {
width: 1.8em;
height: 1.8em;
fill: #fff; }
Cool that he came up with make GitHub icon by using the HTML-5 tag <svg\> thats include icon in svg formate. This method has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down.
Now let’s create the php function in which we will close the code above. For this we need to manage functions.php file of theme we use, but I prefer to use the wp-plugin “My Custom Functions” for this.
Here’s what we’ve got:
/* GitHub Button
* by Arthur Gareginyan
************************************/
function github_button($attr){
ob_start();
?>
</br>
<a href="<?php echo $attr['url']; ?>" class="sc-btn sc--github" target="_blank" rel="nofollow">
<span class="sc-icon"><svg viewBox="0 0 33 33" width="25" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 16,0C 7.163,0,0,7.163,0,16s 7.163,16, 16,16s 16-7.163, 16-16S 24.837,0, 16,0z M 25.502,25.502 c-1.235,1.235-2.672,2.204-4.272,2.881c-0.406,0.172-0.819,0.323-1.238,0.453L 19.992,26.438 c0-1.26-0.432-2.188-1.297-2.781 c 0.542-0.052, 1.039-0.125, 1.492-0.219s 0.932-0.229, 1.438-0.406s 0.958-0.388, 1.359-0.633s 0.786-0.563, 1.156-0.953s 0.68-0.833, 0.93-1.328 s 0.448-1.089, 0.594-1.781s 0.219-1.456, 0.219-2.289c0-1.615-0.526-2.99-1.578-4.125c 0.479-1.25, 0.427-2.609-0.156-4.078l-0.391-0.047 c-0.271-0.031-0.758,0.083-1.461,0.344s-1.492,0.688-2.367,1.281c-1.24-0.344-2.526-0.516-3.859-0.516c-1.344,0-2.625,0.172-3.844,0.516 c-0.552-0.375-1.075-0.685-1.57-0.93c-0.495-0.245-0.891-0.411-1.188-0.5s-0.573-0.143-0.828-0.164s-0.419-0.026-0.492-0.016 s-0.125,0.021-0.156,0.031c-0.583,1.479-0.635,2.839-0.156,4.078c-1.052,1.135-1.578,2.51-1.578,4.125c0,0.833, 0.073,1.596, 0.219,2.289 s 0.344,1.286, 0.594,1.781s 0.56,0.938, 0.93,1.328s 0.755,0.708, 1.156,0.953s 0.854,0.456, 1.359,0.633s 0.984,0.313, 1.438,0.406 s 0.951,0.167, 1.492,0.219c-0.854,0.583-1.281,1.51-1.281,2.781l0,2.445 c-0.472-0.14-0.937-0.306-1.394-0.5 c-1.6-0.677-3.037-1.646-4.272-2.881c-1.235-1.235-2.204-2.672-2.881-4.272C 2.917,19.575, 2.563,17.815, 2.563,16 s 0.355-3.575, 1.055-5.23c 0.677-1.6, 1.646-3.037, 2.881-4.272s 2.672-2.204, 4.272-2.881 C 12.425,2.917, 14.185,2.563, 16,2.563s 3.575,0.355, 5.23,1.055c 1.6,0.677, 3.037,1.646, 4.272,2.881 c 1.235,1.235, 2.204,2.672, 2.881,4.272C 29.083,12.425, 29.438,14.185, 29.438,16s-0.355,3.575-1.055,5.23 C 27.706,22.829, 26.737,24.267, 25.502,25.502z"></path></g></svg></span>
<span class=sc-text>Fork on Github</span>
</a>
<style>
.sc-btn {
display: inline-block;
position: relative;
margin: 0 .25em .5em 0;
padding: 0;
color: #fff;
font-family: "Helvetica Neue", "Helvetica", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1em;
text-decoration: none;
text-shadow: rgba(0, 0, 0, 0.3) 0px -0.1em 0px;
border: 0;
border-radius: 0.4em;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
-ms-border-radius: 0.4em;
-o-border-radius: 0.4em;
background-color: #1a1a1a;
background-image: -webkit-linear-gradient(top, #595959, #1a1a1a 100%);
background-image: -moz-linear-gradient(top, #595959, #1a1a1a);
background-image: -ms-linear-gradient(top, #595959, #1a1a1a);
background-image: -o-linear-gradient(top, #595959, #1a1a1a);
background-image: linear-gradient(to bottom, #595959, #1a1a1a);
box-shadow: inset rgba(0, 0, 0, 0.1) 0px -0.15em 0px, inset rgba(255, 255, 255, 0.2) 0px 0.15em 0px, rgba(0, 0, 0, 0.3) 0px 0.1em 0.3em;
text-align: center;
background-repeat: no-repeat;
-webkit-transition: background-position .1s ease-in-out;
-webkit-appearance: none;
cursor: pointer;
overflow: hidden; }
.sc-btn:hover {
color: #fff; }
.sc-btn:active {
box-shadow: rgba(255, 255, 255, 0.2) 0 0.1em 0, inset rgba(0, 0, 0, 0.3) 0px 0.25em 1em; }
.sc-icon,
.sc-text {
display: block;
float: left; }
.sc-icon {
margin: 0 -.4em 0 0;
padding: 0.6em .8em .5em;
border-right: rgba(255, 255, 255, 0.1) 0.1em solid;
box-shadow: inset rgba(0, 0, 0, 0.1) -0.1em 0px 0px; }
.sc-text {
padding: .95em 1em .85em 1em;
font-size: 1.15em;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif; }
.sc--github {
background-color: #3269a0;
background-image: -webkit-linear-gradient(top, #689cd0, #3269a0 100%);
background-image: -moz-linear-gradient(top, #689cd0, #3269a0);
background-image: -ms-linear-gradient(top, #689cd0, #3269a0);
background-image: -o-linear-gradient(top, #689cd0, #3269a0);
background-image: linear-gradient(to bottom, #689cd0, #3269a0); }
.sc--github:hover {
background-color: #2f6498;
background-image: -webkit-linear-gradient(top, #7ba9d6, #2f6498 90%);
background-image: -moz-linear-gradient(top, #7ba9d6, #2f6498);
background-image: -ms-linear-gradient(top, #7ba9d6, #2f6498);
background-image: -o-linear-gradient(top, #7ba9d6, #2f6498);
background-image: linear-gradient(to bottom, #7ba9d6, #2f6498);
background-color: #4988c6; }
.sc--github:active {
background-color: #3269a0;
background-image: -webkit-linear-gradient(top, #5490ca, #3269a0 100%);
background-image: -moz-linear-gradient(top, #5490ca, #3269a0);
background-image: -ms-linear-gradient(top, #5490ca, #3269a0);
background-image: -o-linear-gradient(top, #5490ca, #3269a0);
background-image: linear-gradient(to bottom, #5490ca, #3269a0); }
.sc-btn svg {
width: 1.8em;
height: 1.8em;
fill: #fff; }
</style>
</br>
<?php
$output = ob_get_clean();
return $output;
}
add_shortcode('github_button', 'github_button'); // Create shortcode
add_filter('widget_text', 'do_shortcode'); // Allow shortcodes in widgets
The string add_shortcode() are creates the shortcode [github_button].
The string add_filter() is needed to allow the shortcodes in widgets.
All done, and now we can use the simple wp-shortcode [github_button url=“#”]. Just put this shortcode in any place of your WordPress website, like post, sidebar or footer and your GitHub fork button will be displayed. But do not forget to replace this # by your link to GitHub repo.
Example:
[github_button url="http://github.com/test/"]
and result:
P.S. If you use any other CMS instead of WordPress then you must remove the string with creating shortcode and filter:
add_shortcode('github_button', 'github_button'); // Create shortcode
add_filter('widget_text', 'do_shortcode'); // Allow shortcodes in widgets
And instead of using wp-shortcode you must call the function with attribute url to display the button.
Arthur Gareginyan
Arthur is a designer and full stack software engineer. He is the founder of Space X-Chimp and the blog My Cyber Universe. His personal website can be found at arthurgareginyan.com.
