https://github.com/frankie567/md-buttons

Add nice SVG buttons to your Markdown files 🎨
https://github.com/frankie567/md-buttons

Last synced: 7 months ago
JSON representation

Add nice SVG buttons to your Markdown files 🎨

• Host: GitHub
• URL: https://github.com/frankie567/md-buttons
• Owner: frankie567
• License: mit
• Created: 2022-07-15T16:49:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-19T08:39:24.000Z (over 2 years ago)
• Last Synced: 2025-03-19T00:06:40.163Z (7 months ago)
• Language: Python
• Size: 29.3 KB
• Stars: 18
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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](https://md-buttons.francoisvoron.com/button.svg?text=Hello%20World)

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

```md

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

```

3. Enjoy!

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

## Examples

### Width (`w`)

```md

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

```

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

### Height (`h`)

```md

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

```

![](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.

```md

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

```

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

### Background color (`bg`)

```md

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

```

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

### Text color (`fg`)

```md

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

```

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

### Padding (`px` and `py`)

```md

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

```

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

```md

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

```

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

### Border radius (`br`)

```md

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

```

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

## License

MIT