Free Call to Action Generator

by David on Thursday 10th February, 2011 at 15:02 COMMENTS (4)

Trying to get the right button for the job can take a lot of your valuable time and energy, especially if you find CSS a little tricky to deal with.

Call to Action Buttons

To make this an easier task I created a button style sheet generator which I plan to enhance and update from time to time and if requested.

The Call to Action Button Generator can be found at our sister site www.EssexSEO.co.uk/call_to_action.php

It allows you to change most aspects of the button and see how this looks before copying the code and pasting into your own site.

Currently there are no background images used so this can be transposed easily, but in the future I aim to add some background image options as well as other cool tricks depending on how many use it and if anyone finds it useful.

The script ;

<href="http://www.essexseo.co.uk/call_to_action.php" class="button"> My Call to Action Button in Action </a>

Looks like this normally ;

My Call to Action Button in Action

Adding a class called button makes it stand out and allows your visitors to see it clearly ;

My Call to Action Button in Action

The button above is a working button and was produced by copying the style sheet supplied by the Call to Action Button Generator and pasting it into my regular style sheet. Then adding this small piece of code when required;

<a href="http://www.essexseo.co.uk/call_to_action.php" target="_blank" class="actionbutton">My Call to Action Button in Action</a>

The important bit that makes it look good is the class="actionbutton" (renaming the style .button from the generator as I already had a .button style).

Using this method I can paste as many designs as I wish as long as I rename the class accordingly; .greenbutton, .bluebutton, .roundbutton, .thisone, .thatone etc. you get the idea.

I can then have as many buttons as I wish and just change the class of each.

These buttons are real buttons created using the Call to Action Button Generator the only difference is I have used my same hover state for each rather than the one supplied.

Click here! Buy this! Find out more! More information... More information...

Hope you like the designs, use the comments below to let us know if you use the generator, and where we can find your button designs, so we can take a look. Also leave some comments if you have any ideas about enhancing the generator.

Happy designing and good luck with your call to actions.

COMMENTS

Jim

Thursday 17th May, 2012 @ 3:16 pm

David,

I am sure this all makes sense to you and IT boffs but I feel that it is too complicated to the average Joe! I do not honestly know what this is about?
I have trouble with CMS without worrying about anything else. What is CSS for intance?

Jim

David

Thursday 17th May, 2012 @ 3:16 pm

Hi Jim,

CSS stands for Cascading Style Sheets which is a list of styles that are assigned to your website design.

Everything would normally look like a big page of plain old text. A style sheet assigns style to each element of the page to make it look good.

So a link would normally look like a normal piece of text in a different colour and with an underscore, but with a style sheet you can assign a totally different look from simple things like a different colour to a completely different design like the button generator.

This is not something you need to worry about, or even know about, as your web designer will be dealing with all that, but it is worth understanding a little about how it does what it does.

Hope this helps.