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:

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:

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).