Skip to content

Instantly share code, notes, and snippets.

@gbraad
Last active May 17, 2026 14:13
Show Gist options
  • Select an option

  • Save gbraad/216f8162d9b382d14b8a097a37cc2c72 to your computer and use it in GitHub Desktop.

Select an option

Save gbraad/216f8162d9b382d14b8a097a37cc2c72 to your computer and use it in GitHub Desktop.
Buy Me a Coffee

Buy Me a Coffee

Using inlined HTML

Buy Me A Coffee

<a href="https://www.buymeacoffee.com/gbraad" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

Using Markdown

"Buy Me A Coffee"

[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/gbraad)

Note: the option target=_blank is not part of the standard Markdown defintion, so I added the extension option but this might not be supported by the parser. You can test this by using:

[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/gbraad){:target="_blank"}

if the text gets printed you are out of luck.

@MchSyadzali

Copy link
Copy Markdown

nice & thanks brother

@Wasserwecken

Wasserwecken commented Feb 2, 2023

Copy link
Copy Markdown

By using inlined HTML, you can set the height so it will align with other badges. But the readability gets worse. Is there an image with another font?

License: MIT

<a href="https://www.buymeacoffee.com/ericdolch"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" height="20px"></a>

@prashantdsala

Copy link
Copy Markdown

Thanks for your efforts!

@gbraad

gbraad commented May 3, 2023

Copy link
Copy Markdown
Author

@Wasserwecken since this is a pixel-based PNG image, this is not possible (and they also do not offer AFAIK).

@fromSmolsoft

fromSmolsoft commented Jun 13, 2023

Copy link
Copy Markdown

@Wasserwecken

By using inlined HTML, you can set the height so it will align with other badges. But the readability gets worse. Is there an image with another font? ...

You can use https://cdn.buymeacoffee.com/buttons/v2/arial-orange.png for arial-orange combo.
Buy Me A Coffee
Basically use their button generator to learn names of color + font combos.

@gbraad

gbraad commented Jun 13, 2023 via email

Copy link
Copy Markdown
Author

@fromSmolsoft

fromSmolsoft commented Jun 14, 2023

Copy link
Copy Markdown

@gbraad

That arial+orange looks bad when scaled down, as the font is actually too small compared to the button and the cup next to it.

Well someone asked whether there are other official options with different font and got reply there are none. Which is not true.
This is what they have. I bet there are more.

@Panthersoul

Copy link
Copy Markdown

Thanks

@athachai29

Copy link
Copy Markdown

Thanks ❀️

@Rouhollah

Copy link
Copy Markdown

thanks. it's very good.

@syntaxboybe

Copy link
Copy Markdown

many thanks!

ghost commented Nov 15, 2023

Copy link
Copy Markdown

Thank you very much :)

@stanleyugwu

Copy link
Copy Markdown

For custom text, emoji, font, use below code, change devvie to your username:

<a href="https://www.buymeacoffee.com/devvie"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me Okpa&emoji=🍘&slug=devvie&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" /></a>

tweak the value of text, slug,font_colour,button_colour, etc to your taste

@JellyTitan

Copy link
Copy Markdown

Thank you!

@ZombieGeeK0

Copy link
Copy Markdown

Thanks

@zincplusplus

Copy link
Copy Markdown

Thank you πŸ™

@jwson-automation

Copy link
Copy Markdown

κ°μ‚¬ν•©λ‹ˆλ‹€!

@kevinjamau

Copy link
Copy Markdown

Great, you saved my time , Thank you

@EliasPereirah

Copy link
Copy Markdown

Very cool, is there any way to center it horizontally?

@MaKTaiL

MaKTaiL commented Jun 3, 2025

Copy link
Copy Markdown

For custom text, emoji, font, use below code, change devvie to your username:

<a href="https://www.buymeacoffee.com/devvie"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me Okpa&emoji=🍘&slug=devvie&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" /></a>

tweak the value of text, slug,font_colour,button_colour, etc to your taste

This doesn't appear to be working anymore.

@MaKTaiL

MaKTaiL commented Jun 4, 2025

Copy link
Copy Markdown

Here is another one if anyone is interested:

Buy Me a Coffee

[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-orange?logo=buy-me-a-coffee)](https://www.buymeacoffee.com/maktail)

@mfncooper

Copy link
Copy Markdown

For custom text, emoji, font, use below code, change devvie to your username:

<a href="https://www.buymeacoffee.com/devvie"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me Okpa&emoji=🍘&slug=devvie&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" /></a>

tweak the value of text, slug,font_colour,button_colour, etc to your taste

@stanleyugwu Is there any way, with this button-api URL, to get a button without the supporter count included? That would be exactly what I want.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment