Split testing call to action buttons to increase click-through rates

One of the easiest elements to test on your landing pages is your call to action buttons.

Changing the size, colour, text, or position can have a big effect on your click-through rates.

I’ve tested dozens of different buttons, but after reading The ULTIMATE Submit Button REVEALED! Putting all the Pieces Together… by Eric Graham (a.k.a. the Conversion Doctor), I realised there was something I hadn’t tested…

… adding a border around the button that changes when you hover your mouse over it.

So I added some new CSS rules to my highest CTR button.

And here it is:

download Product X now

If you hover your mouse over it you’ll notice your cursor changes from the arrow to the hand (primary feedback).

The red border changes to green (secondary feedback).

It also uses the “title” attribute of the <a> tag to display a tooltip call to action (more secondary feedback)

My split testing results

Compared to the button without the interactive border, it increased CTR by 14%.

Not bad for five minutes work, right?

Of course, lots of factors affect your CTR, so you may not get the same results as me.

Grab the code

If you want to try this button yourself, here’s the code:

#content a img.download {
    border:3px solid #FB2A2A;

#content a img.download:hover {
    border:3px solid #0C971F;

<a href="http://your-download-affiliate-link-here.com/" title="click to download Product X now"><img src="/images/download.png" alt="download Product X now" width="246" height="40" class="download" /></a>

If you need to change the button text, just visit Da Button Factory and make your own button. It’s where I made the above button (sans the arrow icon).