A prominent Call to Action is really important in getting your users to move to your Signup, Payment or Pricing page. I'm going to share how to build a strong and nice looking Call to Action using CSS3, but also why you should be using one.

Firstly, this type of tutorial has been done many times before and I don't want to go over old ground. I'd rather focus on the power of a strong call to action, why you need one, and where you should place it.

Lets get the tutorial bit over with first though....

The Code

In your CSS file use the following code.

a.button {
    /* general look */
    float: left;
    display: inline;
    padding: 18px 24px;
    margin: 0 10px 0 0;
    border: 1px solid #9cc92c;
    background:url("../gfx/button_bg.png") repeat-x #ADDD37;

    /* CSS 3 goodies */
    -webkit-box-shadow: 0px 0px 15px #ccc;
    -moz-box-shadow: 0px 0px 15px #ccc;
    box-shadow: 0px 0px 15px #ccc;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;

    /* font stuff */
    font-family: arial, sans-serif;
    font-size:25px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 0 3px #444;

    /* misc */
    outline: none;
    cursor: pointer;
}

The first section lays out the button, making it in to a padded box with a border and gradient background.

Next you will see the CSS3 goodies, which add the round corners and shadows.

After that there are the text attributes such as font size, weight and finally some misc properties that will make sure your button works nicely in various browsers (e.g. removing the outline in FireFox and ensuring the pointer cursor always appears).

You will also need this ZIP file which contains the PNG used for the background. Note that it's easier and more cross-browser compatible to use a PNG as a background rather than using CSS3 although it is possible to do gradients with CSS3.

Download Assets

Then in the HTML use this code which uses the '.button' class for the anchor:

<a href="signup.html" class="button">Get a Free Account</a>

That will produce a nice big call to action for your site.

The Demo

You can see this button in action on Project Bubble where the link goes to our sign up page. Hover over the button and you will see that the background colour changes (simply add a ':hover' state to your CSS and change the background colour).

Now lets get on to the more important stuff - the 'Why?'.

Why do I need a prominent call to action?

I've been there, and I've seen lots of other startups do a similar thing - they will place loads of screenshots, text and information on their wonderful product or service yet bury the sign up link somewhere where you can't find it.

Studies have proved that when a visitor comes to your website you have about 3-5 seconds to impress them or they will switch off. In those few seconds while they might be interested in what you have to offer, make sure you lead them on to the next page with a clear call to action.

In the case of my startup you will notice that I have done just this. On Project Bubble the service is explained within 2-3 seconds of text and then there is the call to action. If users are interested and want to read on they can scroll down, or they can play the video on the right (which is also clear, but not as obvious as the 'Get a Free Account' link which is where we really want them to go).

The benefits of Split Testing

There are some great tools for this so I won't write too much about Split Testing, but basically you want to make sure that the changes you are making to your landing page are actually making a difference by using Split Testing or A-B testing.

For example, lets say you have a signup conversion rate of 1% (1 visitor for every 100 visitations) and then you add a nice clear Call to Action using the above code. You want to make sure that you are firstly tracking the conversion rate and also you are using a tool to compare the difference. The new CTA button may actually increase your conversion rate to 3%.

After this you may find that just by changing the colour of the button from Green to Orange you get an increase of 0.5% (orange is known to be a warm and inviting colour, and green is considered a safe colour). So make sure you have good tracking tools in place.

Where should you put your CTA?

The best place is probably under the title and overview, to the left of your product image or screenshots and above the fold. You may want to vary this though and try different placements using the A/B testing mentioned above.

The placement of your CTA is critical. If it's buried under reams of copy your user may never notice it or get down that far. If the button is way over on the right or too close to a large image that is distracting (such as a nice big screenshot) your user may miss it.

It's also a good idea to have other call to action buttons on your site, such as in the navigation or in the footer - but don't place too many or your users may think you are desperate!

Don't forget SEO

Because of the wonders of CSS3 it's possible to make these beautiful buttons but also benefit from search engine optimization. In the old days you would use an image and an ALT tag, whereas now you can use HTML and have the anchor text read by the search engine yet still have a beautiful looking button.

If you have any other examples of good Call to Action buttons please share! I hope this helps and let me know if this tutorial has helped your conversion rate.