MD Buttons

Add nice SVG buttons to your Markdown files 🎨

How does it work?

1. Build your button URL:

https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World

2. Add it to your Markdown content as an image:

![Hello world](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World)

3. Enjoy!

Examples

Width (w)

![](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World&w=300)

Height (h)

![](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World&h=100)

Font size (fs)

By default, the font size will be automatically guessed so that the text fits within the desired width and height. You can however force a specific size, but in this case the text may overflow the button.

![](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World&fs=48)

Background color (bg)

![](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World&bg=e74c3c)

Text color (fg)

![](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World&fg=e74c3c)

Padding (px and py)

![](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World&px=50)

![](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World&py=50)

Border radius (br)

![](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World&br=0)

License

MIT