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

Image for post
Image for post
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

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.

Image for post
Image for post
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
Image for post
Image for post
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

Image for post
Image for post
Button background colour.

Text Colour

Image for post
Image for post
Button text colour.

Button Roundness

Image for post
Image for post
Roundness of the button corners.

Button Link

Image for post
Image for post
Link that the button launches when clicked.

Button Text

Image for post
Image for post
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.

Written by

I slung code for Fortune 500 companies in a previous life. Now, I write and make some photographs. I’ve moved on to Dev.to. Portfolio on CaughtMyEye.cc

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store