HTML/CSS: Customising a Call-to-Action Button

The five things we will customise in this tutorial: background colour, text colour, roundness of the button’s corners, the link the button will open, and the call to action text.

The Keys to Customising your own Simple Call-To-Action Button

This is part 2 of 2 on How-to Get a Free CTA Button. Last time, I defined what a CTA is and shared the code that you can use to roll your own.

Today, we’ll dissect the HTML (hypertext markup language) behind the button. This tutorial empowers you to customise your CTA buttons.

If you recall from the previous article, below is a graphic of the button and the corresponding HTML. The live button is on my marklchaves test site.

A simple Call-to-Action (CTA) button.

<a style="display: block; height: 100px; width: 500px; background: #606060; color: #ffffff; text-align: center; font-weight: bold; font-size: 300%; line-height: 100px; font-family: Arial; border-radius: 20px; text-decoration: none;" href="http://eepurl.com/bUDMID">Sign me up!</a>

Let’s start! I’ve highlighted in the graphic below the five things we will customise in this tutorial:

1. Background colour
2. Text colour
3. Roundness of the button’s corners
4. Link that the button will open
5. Call-to-action text

The five things we will customise in this tutorial: background colour, text colour, roundness of the button’s corners, the link the button will open, and the call to action text.

Background Colour

To change the background colour, edit the ‘606060’ (grey in hex). Don’t touch the ‘#’ or the ‘;’. Only update the six (hex) numbers. Try out this free online color picker to help you find a hex code for the colour of your choice.

Button background colour.

Text Colour

To change the text colour, edit the ‘ffffff’ (white in hex). Don’t touch the ‘#’ or the ‘;’. Only update the six (hex) numbers. Try out this free online color picker to help you find a hex code for the colour of your choice.

Button text colour.

Button Roundness

To change the roundness of the button’s corners, edit the ‘20’. Don’t touch the ‘;’ or the ‘px’. Only update the numbers. Experiment with a range of numbers. The ‘px’ stands for pixel. The larger the number is, the more round the corners become.

Roundness of the button corners.

Button Link

To change the link that the button launches when clicked, edit the ‘http://eepurl.com/bUDMID’. Don’t touch the two “ marks. Only update the link in between the quotes.

Link that the button launches when clicked.

Button Text

To change the call-to-action text, edit the ‘Sign me up!’ text in between the angle brackets. Don’t touch the ‘>’ or the ‘<’. Only update the text. Try to use one to four words.

Youre favourite call-to-action. Try to keep it within three to seven words.

If needed, re-read part 1 of this series, How-to Get a Free CTA Button.

If you have any questions, leave me a comment :-).

Thanks for reading!

Next Up: Learn How-to Centre Your New CTA Button.