HTML/CSS: Customising a Call-to-Action Button
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 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:
- Background colour
- Text colour
- Roundness of the button’s corners
- Link that the button will open
- Call-to-action text
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.
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.
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.
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.
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.