Github readme buttons

Free to use, retina-ready, customizable buttons for any MarkDown file. Follow the guide below, or use the button playground to create your style. You can use the buttons anywhere on the web, from your blog to GitHub readme files. The buttons are fully customizable by an easy-to-use API.

About me Github repo

Basics

The most basic use case. Just choose the text and implement the tag in your MD file. Both of the examples below are usable in your markdown file, and both will give you the same result.

Markdown

![Example button](https://gh-stamps.vercel.app/api/Example)

Markdown Link

[![Example button](https://gh-stamps.vercel.app/api/Example)](https://www.example.com/)

HTML (also works in Markdown)

<img src="https://gh-stamps.vercel.app/api/Example" alt="Example button" />

HTML Link

<a href="https://www.example.com/">
  <img src="https://gh-stamps.vercel.app/api/Example" alt="Example button" />
</a>

Configure

Changable preview of a button
https://gh-stamps.vercel.app/api/Example?backgroundColor=c2e1ff&color=1d568b&fontSize=14&borderWidth=1&borderRadius=4&borderColor=90bee9&padding=10

Available parameters

The following parameters are accepted:

?fontFamily=helvetica

You can change the font by using the fontFamily parameter. Accepted values are:
helvetica, andale mono, arial, avenir, avenir next, comic sans ms, courier new, georgia, impact, quantify, tahoma, times new roman, trebuchet ms, verdana, webdings,
Make sure to replace spaces in the font's names with %20.

https://gh-stamps.vercel.app/api/Example?fontFamily=impact

?fontSize=14

Change the font size by using this parameter.

https://gh-stamps.vercel.app/api/Example?fontSize=30

?borderRadius=4

Change the rounded corners by using this parameter.

https://gh-stamps.vercel.app/api/Example?borderRadius=16

?backgroundColor=0794e0

Change the background color by using this parameter.

https://gh-stamps.vercel.app/api/Example?backgroundColor=0C7C59

?color=white

Change the text color by using this parameter. Accepted values are html named colors and hex values.

https://gh-stamps.vercel.app/api/Example?color=BAC1B8

?borderColor=0b76b0

?borderWidth=0

Change the border by using the borderColor and borderWidth parameters.

https://gh-stamps.vercel.app/api/Example?borderWidth=20
https://gh-stamps.vercel.app/api/Example?borderWidth=3&borderColor=58A4B0

?padding=0

?paddingTop=4

?paddingLeft=8

?paddingRight=8

?paddingBottom=4

Change the padding by using these parameters. If the padding parameter is used, it will overwrite the paddingLeft, paddingTop, paddingBottom and paddingRight parameters.

https://gh-stamps.vercel.app/api/Example?padding=20
https://gh-stamps.vercel.app/api/Example?paddingLeft=40
https://gh-stamps.vercel.app/api/Example?paddingRight=40
https://gh-stamps.vercel.app/api/Example?paddingTop=20
https://gh-stamps.vercel.app/api/Example?paddingBottom=20

Examples

https://gh-stamps.vercel.app/api/Example?borderWidth=2&borderColor=2B303A&backgroundColor=white&color=2B303A
https://gh-stamps.vercel.app/api/Example?backgroundColor=BAC1B8&color=2B303A&borderRadius=0&fontSize=20&fontFamily=courier%20new
https://gh-stamps.vercel.app/api/Example?backgroundColor=0C7C59&color=white&borderRadius=50&fontFamily=andale%20mono
https://gh-stamps.vercel.app/api/Button%20with%20a%20very%20long%20text%20in%20it?backgroundColor=eee&borderWidth=1&borderColor=ccc&color=000
https://gh-stamps.vercel.app/api/Example?borderRadius=16&fontFamily=comic%20sans%20ms&backgroundColor=FF7F51

Combining parameters

Always write a ? between the content and the first parameter. If you use more than one parameter, you separate them by using &.

Colors

Accepted values are html named colors and hex values.Hex values should be written without the hashtag.

Some examples:

Named colors: red, teal, orange
Hex colors: C0FFEE, DE1E7E, BADA55