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.