How to add button to Ghost CMS - easy way using HTML and CSS

This tutorial is the easiest way to make a button for Ghost CMS with CSS and HTML.

I'll show you how to achieve this with detailed instructions and images.

You'll learn how to make changes alone and save time the next time you need to add buttons.

Yes, you can do this without knowing how to code.

You can achieve the same results as me in about 15 minutes.

Let's go from zero to hero now!

Affiliate Disclaimer: Some links are affiliates. This means that if you buy after clicking on one of those, I get a commission at no additional cost for you.

TL;DR

This is how we'll make the buttons:

• Use the Best CSS button generator to generate the code.
• Customizing the colors and style of the buttons with this tool.
• I'll tell you where to put the code on Ghost editor.
• You'll learn how to change the link and text of the button.
• Some advanced settings that will improve your buttons.
• HTML button templates you can copy.
• Update February 2023: I've discovered Buttons Generator from Marko Denic, which is also an easy tool to use.

Making the button

Option 1: Best CSS button generator

To start making the button, I recommend using the Best CSS button generator or copying one of the templates at the end of this tutorial.

Steps to make the button:

1. Go to Best CSS button generator website.
2. On the left sidebar, pick a style you like.
3. Customize the color or size of the button to your liking using the sliders on the right sidebar.

For an easy customization process focus on the button color without gradients and text color. Then, set the box border to zero, it is prettier.

My advice will be to be as simple as possible. Avoid using a background around the button, box shadows, or text-shadow.

You might have noticed that I haven't mentioned customizing the text. This was on purpose.

I'll teach you how to change this on the CSS code. Why? Because this way you'll be able to change things without help or copying code from the internet every time. If you don't want this. Change the font and style, while you are creating the button.

Remember, this process is about being efficient in the long run.

Option 2: Button Generator

Button Generator allows you to create custom buttons for your website or blog without having to code them yourself.

And it's super easy to use.

You just need to choose a button you like (there are more than 100 available at the moment of writing this), and when you find a button you like, just click on it and paste the code into your website's editor. And that's it!

Your new button is ready to use.

Adding HTML - structure

Now it's time to go into Ghost editor and add the button.

First, we start with the HTML, which is the structure.

Press the plus inside the editor to open the cards selector (or type "/").

Then, pick the HTML card.

Afterward, you should add the following code:

<div class="myBTNdiv">
   
</div>

Let's break it down:

• The div will work as the container for the button.
• The class works like the personal name of the div.
• We add this name to help to customize this specific div with the CSS style.

The next step is pasting the code from the button we created before.

Back, on the Best CSS button generator, click on get code and select the first line of code or copy this code below, it's the same thing.

<a href="replaceThisWithURL" class="myButton">Replace this with your text</a>

You should paste this inside the div, like this:

<div class="myBTNdiv">
  <a href="replaceThisWithURL" class="myButton">Replace this with your text</a> 
</div>

Adding CSS - style

It's time to add the final piece of the puzzle: make your button stylish!

This code can be unique, depending on how much customization you did in using the tool. This is why I recommended you go easy and avoid getting lost.

On the Ghost editor, click on the Settings icon (top right). Scroll until you find "Code injection", now press it.

This is the place you put the style of the buttons. Now, you want to paste this code inside the "Post header" field. Like this:

<style>
.myBTNdiv {
    display: flex;
  	justify-content: center;
    }


</style>

Next, go to the Best CSS button generator, click "get code" and select all the code below the a tag (like in the screenshot below).

Go back to Ghost editor and paste the code inside the head style. Like this:

<style>
.myBTNdiv {
    display: flex;
  	justify-content: center;
    }

.myButton {
	background-color:#44c767;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	padding:16px 31px;
	text-decoration:none;
}

</style>

Quick notes:

• You don't need to change the myBTNdiv style, ever.
• The code needs to be inside the style tags, like in the screenshot.

Now, if you go to preview the button, you'll notice something is wrong with the text of the button.

Don't be scared. This happens because we aren't using a button tag. So, the text acts like every link on articles.

To fix this, you'll gonna make the font and style of the button important. How? by adding !important after color and text-decoration. Like this:

<style>
.myBTNdiv {
    display: flex;
  	justify-content: center;
    }

.myButton {
	background-color:#44c767;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:18px;
	padding:16px 31px;
	text-decoration:none !important;
}

</style>

If you followed all steps in this tutorial, your button won't fill the full width of the page. I found this more stylish for buttons.

In case, you want your button to be full width (fill all available horizontal space) add width:100% !important and text-align: center. For example:

<style>
.myBTNdiv {
    display: flex;
  	justify-content: center;
    }

.myButton {
	background-color:#44c767;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:18px;
	padding:16px 31px;
	text-decoration:none !important;
	width: 100% !important;
	text-align: center;
}

</style>

Customizing font size and color Ghost CMS button

If you want the button to use the same font as the rest of the website, remove the font-family the line from the code.

Or, if you want a specific font for the button, this is the line you want to look at. Replace the current font you have with the new desired font.

To change the color of the text, look for the color line. You can use common color names like white or grey. Yet, I recommend you use a HEX color. This will give more consistency and color options.

Use a tool like Coolors.co if you want to find beautiful colors and build a custom palette for your website.

Customizing the link and text of the button

To make this button work as intended, you still need to change 2 things:

• The URL of the page you want to direct people.
• The text that appears in the button

You'll need to change only some code inside the a tag.

The link should be put in the same place as replaceThisWithURL. Yes, you must keep the quotation marks.

For example, I'll add a link to the Ghost website. See how I went from href="replaceThisWithURL" to href="https://ghost.org/".

  <a href="https://ghost.org/" class="myButton">Replace this with your text</a> 

Next, it's time to change the text. The current text is Replace this with your text and I want to change it to the Ghost CMS website.

So, I'll go to the code, delete the previous text and add the text I want.

  <a href="https://ghost.org/" class="myButton">Ghost CMS website</a> 

Link attributes in Ghost CMS

In most cases, your button is finished. Yet, if you use this for affiliate links or want the button to open on a new tab, you must add 2 more things.

First, let's add the sponsored tag for affiliate links.

Remember the a tag we changed the URL? Now, we go there and add a new attribute to show this is sponsored link.

Add rel="sponsored" inside the a tag. See example:

<div class="myBTNdiv">
   <a href="https://ghost.org/" class="myButton" rel="sponsored">Ghost CMS website</a> 
</div>

Now, to make the link open in a new tab, add target=_blank. And the final result will be:

<div class="myBTNdiv">
  <a href="https://ghost.org/" class="myButton" rel="sponsored" target=_blank>Ghost CMS website</a> 
</div>

Go ahead and test it (but come back to read the rest of the tutorial):

Save button as a snippet

Want to know a cool trick? You can save the buttons you create!

Yes, you read that right. This is neat to save time.

To save a snippet on Ghost editor, click on the HTML card once and press the icon on the right. Like this:

Boom! Done.

Bonus tip

Do you want an extra way to save time? Keep reading, if you want to use the same button style for all the pages of the website.

Go to website Settings, "Code Injection" and "Site Header".

There you can add the style part as we did before. This way, every time you add the same button code and class to the website it will change it to your desired style.

Subscribe to newsletter about tech for blogs and newsletters

Button templates - using HTML and CSS

These are the templates I use the most on this website.

You can copy or change them to style to fit your website color scheme.

100% width button

HTML:

<div class="btn100DIV">
    <a href="#" class="100widthBTN" target=_blank>TEXT</a>
</div>

CSS:

                                         
<style>
.100widthBTN {
	background-color:#046bf1;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:18px;
	padding:18px 31px;
	text-decoration:none !important;
    color: #fff !important;
    text-align: center;
    width: 100% !important;
}

.btn100DIV {
    display: flex;
  	justify-content: center;
    }
</style

50% width button

HTML:

<div class="btn50DIV">
    <a href="#" class="50widthBTN" target=_blank>TEXT</a>
</div>

CSS:

                                         
<style>
.50widthBTN {
	background-color:#046bf1;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:18px;
	padding:18px 31px;
	text-decoration:none !important;
    color: #fff !important;
    text-align: center;
    width: 50% !important;
}

.btn50DIV {
    display: flex;
  	justify-content: center;
    }
</style

Summary

There you have it.

A complete tutorial with detailed steps to create and customize a button for your Ghost website.

Let me know if you have any questions. You can find me on Twitter @TiagoSilvaHQ or go to the contact page.

This article is part of a series where I talk about how to make your life easier using Ghost. Other articles of the series are How to make Ghost open links in a new tab and Sending posts by email.

If you're looking to start a Ghost website, have a look into Ghost (Pro). It's the official managed hosting and one of the cheapest if you have few subscribers.