Share this:

The importance of the ‘call to action’ on your charity website (*includes FREE samples)

Ok, so you’ve got a website, you’ve picked your design and added your logo and all of that fun stuff, now how do you make sure your charity website gets results?

Don’t make the mistake of forgetting this all important step – the ‘call to action’!

A ‘call to action’ is exactly what it sounds like – a call to your website users to make some kind of action.

As the author or manager of your charity’s website, you need to have a clear idea of what action you are hoping your users will take when they read any page on your site and make sure that this is conveyed properly to the end user.

(*Further down the page we’ve added some free sample buttons and information to help you, but first here’s some examples of charities using the ‘call to action’ to give you a better idea of what it means.)

Examples of ‘call to action’ buttons on charity websites

prostate-cancer.org.uk

prostate-cancer.org.uk immediately draws the users attention to their ‘donate’ message using a bright red button for their call to action contrasting strongly with the blue design of their website.


savethechildren.org.uk

The call to action at savethechildren.org.uk does the job of drawing the users attention, but it’s a little less attention grabbing as it’s colour is the same as some other important elements of the site’s design. (Perhaps it was felt that using a different colour would have been too off-putting for this design?)


steps-charity.org.uk

There’s no missing the call to action when you arrive at the steps-charity.org.uk website – this bright pink button is the first thing you notice as it’s in such strong contrast to the greys and blues in the other elements of the screen (note – as you scroll down you will see there are other buttons and sections using the same bright pink but they are ‘below the fold’ which means underneath the area that the user sees when they arrive on the page, so they don’t distract from the main ‘call to action’.)


mind.org.uk

Like the others in this list, the ‘call to action’ at mind.org.uk is attempting to raise donations, but there’s also another call to action above that that allows users to input their post code and find the charity in their local area.

Whilst the design on these ‘call to action’ buttons is not the most eyecatching from the list of examples, this is a good example of evaluating YOUR charity’s needs and pushing your aim in to the forefront, in this case, engaging users to get more involved at a local level.

Deciding which action you want people to take from your website

Every charity is different but the most common uses for ‘call to action’ links or buttons on charity websites are:

  • donations
  • mailing lists
  • volunteering

But you can make them for anything – do you want your users to download your new poster? Or to share a link on Facebook? Or contact you?

Making your ‘call to action’ stand out and choosing the right style

Generally your ‘call to action’ should be the first thing people notice when they arrive on your page. It should be eyecatching and slightly different from the other elements.

This is usually achieved by making the ‘call to action’ a larger font size and a different colour to your website’s usual colour scheme, but don’t go too crazy – you still want to get the right colour balance!

Try locating your website’s general colour on the colour wheel then use the colour directly opposite to achieve a contrasting but still harmonious style. (This colour scheme website might be of help to you here too, this will tell you the HTML colour codes but if you’re unsure what that means just use your eye to pick the right colour when choosing the colour whilst using your website software)

FREE ‘call to action’ images and sample HTML code to use on your website

You don’t have to be a design whiz to make a great looking ‘call to action’ button. You don’t even have to use an image, you can make attractive ‘call to action’ buttons just using HTML and CSS code (although they might not look as good for anyone using an older browser like Internet Explorer version 6).

Here’s some totally free examples that you can use on your website. We have HTML/CSS code and image versions available and both large and small font sizes:

(*note – it’s advisable to separate the CSS from the HTML and not use inline styles, but if you’re unsure what this means just use the codes below)

1. ‘Make a donation’ button

Example:

RED ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


ORANGE ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


YELLOW ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


GREEN ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


BLUE ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


PURPLE ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


2. ‘Sign up now’ button

Example:

RED ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


ORANGE ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


YELLOW ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


GREEN ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


BLUE ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


PURPLE ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


3. ‘Contact us’ button

Example:

RED ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


ORANGE ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


YELLOW ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


GREEN ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


BLUE ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


PURPLE ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


Want to download all the buttons? We’ve put them all in handy .zip file for you. Download all ‘call to action’ buttons.


If these buttons helped you, great! :) Please let us know in the comments below, or if you have any requests for different colours or phrases, or any questions about using these on your website – go ahead and ask by leaving us a comment.


– These free samples are available for charitable organisations without constraints, you are welcome to save, download and use these images to your hearts content! However, redistribution is not permitted.

– If you’re a web designer working on website for a non-profit organisation please feel free to use the buttons.

– Attribution / a link back to WebsitesForCharity.co.uk is not required but would be greatly appreciated! Thank you.

Share this article:


Comments are closed.