« Previous | Home | Next »

Eric Graham says Size Matters!

March 7, 2007

For Submit Buttons That Is....

I refer to Eric's blog a lot - that's because I like the testing he regularly shares with his readers... it's very valuable stuff!

I mentioned his results on split testing Submit Button Size before. It basically comes down to this: make sure your visitors know that something is clickable. Submit buttons don't exactly jump out and say "I'm Clickable" so you need to give them some help. This will get more people clicking on your buttons and will therefore boost your conversion ratio, and that, will boost your profits!

I thought it'd be helpful to give some examples on how to do this. I've put together a little html file to demonstrate how you can use CSS to change the appearance of a button. The example is not just CSS because Internet Explorer will not render a "hover" on a button with CSS, so the work around for this is to mix in some JavaScript to "force" the CSS class to change. Some of my reading suggests that Internet Explorer version 7 fixed this, but not that I can tell, it still fails for me on IE7.

This example works on a PC in Internet Explorer, Firefox, Opera, and Netscape. It works on a Mac in Firefox, but fails in Safari. I'm not a Mac expert and from what I've read, you can't change the buttons in Safari. I did find some notes that said this may be fixed in a new release of Safari.

You can see the example here: Submit Button Examples.

You can download it by right-clicking on it and selecting "Save Target As..." and then you can edit it and copy and paste into your own pages if you want to.

I put the CSS in the top of the html file, but in most cases this would/should be in a separate file.

I also used this same code on my subscribe button at the top right.... Give it a try, fill out the form and sign up!

Take care,
Fred

P.S. I almost forgot... to learn more about using CSS and HTML in general, purchase my Home Study Course: www.WebSiteTrainingOnline.com, and to learn more about JavaScript and PHP Scripting, get my Home Study Course: www.WebScriptingOnline.com.

UPDATE: Based on Eric's latest split test results, I've modified my Sign Up button again. This time I've made the border turn green on hover. You can read Eric's results here: The ULTIMATE Submit Button REVEALED!. Eric uses a table background a few pixels wider than the button for his hover effect and I use the border of the button itself... I wonder how these two approches would fair in a split test? I also updated my Submit Button Examples to reflect the code and CSS for my current button.

About the Author

Fred Black is an experienced online business operator, programmer, web site developer, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.

You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact.