Skip to content

Instantly share code, notes, and snippets.

@Potherca
Last active January 31, 2021 06:16
Show Gist options
  • Save Potherca/b4693db86920f9cfa1b9 to your computer and use it in GitHub Desktop.
Save Potherca/b4693db86920f9cfa1b9 to your computer and use it in GitHub Desktop.
The "Deploy to Heroku" button using Shields.io

The standard button

Although the technology and philosophy behind the 'Deploy to Heroku' Button are quite awesome, the default look may not what you want. For one thing there is a distinct difference between the PNG and SVG versions Heroku has on offer.

Description Image URL
PNG format heroku deploy button png https://www.herokucdn.com/deploy/button.png
SVG format heroku deploy button svg https://www.herokucdn.com/deploy/button.svg

Which means you have to choose between "looks good" and "Retina Ready".

Beyond that... the shape, form or size might break with the look and feel of your site or README file.

Or maybe, if you're a bit like me, you dislike the fact that you can't just use a service provider you already use for other services anyway.

Using a Shields.io button

As shield.io already offers a decent ammount of badges for various service providers, it might be nice to use the same style for your deploy button. The only real down-side is that the button will not contain the nice little icon. We could just use an "up arrow" instead.

Shields.io offers 3 flavours of styles you can choose from...

Description Image URL
Standard heroku deploy shield plain https://img.shields.io/badge/%E2%86%91_Deploy_to-Heroku-7056bf.svg
Flat (with rounded corners) heroku deploy shield flat https://img.shields.io/badge/%E2%86%91_Deploy_to-Heroku-7056bf.svg?style=flat
Flat and Square heroku deploy shield flat square https://img.shields.io/badge/%E2%86%91_Deploy_to-Heroku-7056bf.svg?style=flat-square

Just pic your favorite one and you're good to go!

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