To get started, checkout buttons.github.io!
- Unlimited Button Types
Our github:button generator provides 6 basic button types including follow, watch, star, fork, issue and download, each at normal or large size, with or without a dynamic count. In addition, almost everything including the API for dynamic count is customizable via simple HTML markup. - Pixel Perfect
Octicons based vector icons always look sharp on every display. The automatically sized iframe solves the big headache of iframe sizing. Plus, its high precision sizing algorithm works the best for HiDPI displays. - Fast
Hosted on GitHub Pages, this service delivers high performance and availability, using asynchronous code that never blocks the page loading. - Stable
High test coverage for the main library and automated tests on Circle CI assure the service quality. - Backward Compatible
As you may still need this, outdated browsers like IE 6 are supported. - Accessibility
ARIA label support enables accessibility for screen reader users.
Add as many <a class="github-button"> as you like, then put the <script> after the last button.
<a class="github-button"
href="{{ link }}"
data-icon="{{ octicon }}"
data-count-href="{{ count_link }}"
data-count-api="{{ count_api }}"
data-count-aria-label="{{ count_aria_label }}"
data-style="{{ style }}"
data-text="{{ button_text }}"
aria-label="{{ button_aria_label }}"
>{{ text }}</a><script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>| Attribute | Description |
|---|---|
href |
GitHub link for the button. |
data-icon |
Octicon for the button. It defaults to octicon-mark-github. All available icons can be found at Octicons. |
data-count-href |
GitHub link for the count. It defaults to href value. Relative url will be relative to href value. |
data-count-api |
GitHub API endpoint for the count. |
data-count-aria-label |
Aria label for the count link. # in this attribute will be replaced with a real count. |
data-style |
default or mega. |
data-text |
Text displayed on the button. This option will override link_text. |
text |
Text displayed on the button and the fallback link. |
aria-label |
Aira label for the button link. |
You can use any GitHub API endpoint that supports GET request.
You must append a #hash to the endpoint to extract a value for the count from the JSON response.
e.g. /users/octocat#followers will extract followers from the JSON.
You can also access specific subnode in the JSON.
e.g. /repos/octocat/hello-world#owner.login will extract owner.login.
e.g. /users/octocat/repos#[0].open_issues_count will extract open_issues_count from the first enrty in the array.
See GitHub Developer for API references.
git clone --recursive https://github.com/ntkme/github-buttons.gitcd github-buttons && npm installcake buildcake testSee LICENSE.md.