Perry Belcher revealed his payment button in the Belcher Button | Perry Belcher. Split tests showed a rise in response of 35 to 320% over any other buy button tested.

In his article titled 'The ULTIMATE Submit Button REVEALED! Putting all the Pieces Together…' Eric Graham (The Copy Doctor) says using rollover effects on a button can increase response rates by up to 46.5%

Perry Belcher Picture

So if you make use of the Belcher button, roll over effects could improve your sales even more.

How can you do it, particularly if you are utilizing PayPal, and also have no idea using Javascript?

The trick is to use CSS to control the roll over effects, and use an altered Belcher Button. Here's how:

Edit the Belcher button and delete the red border to show a transparent background. Save the button as a .gif with transaparency.

Add the new gif image to your PayPal code as the payment button.

Wrap your PayPal code inside a and employ CSS to control the background color and the hover color of the div.

You will see a functional example here

This is actually the HTML code you will require:

1) The CSS code - add this between the tags or to your existing CSS.

.pbtn
margin: auto;
background-color: #ff0000;
width: 460px;
height: 221px;

.pbtn:hover
background-color: #00cc00;

-->

2) The form code - add this to your sales page:

...
the rest of your PayPal form code goes here
...

Perry Belcher Picture

Important notes:

1) Use the correct DOCTYPE inside your webpage HTML since the roll over effect may not work if browsers run in Quirks mode. I made use of this:

"http://www.w3.org/TR/html4/loose.dtd">

2) Be sure you use the correct image width and height as the div width and height or you'll end up with the backdrop color spilling out from the edges from the payment button.

Perry Belcher revealed his payment button in the Belcher Button | Perry Belcher. Split tests showed a rise in response of 35 to 320% over any other buy button tested.

In his article titled 'The ULTIMATE Submit Button REVEALED! Putting all of the Pieces Together…' Eric Graham (The Copy Doctor) revealed that using roll over effects on the button can increase response rates by up to 46.5%

Perry Belcher Picture

If you make use of the Belcher button, rollover effects could improve your sales much more.

How do you get it done, particularly if you are utilizing PayPal, and also have no clue how to use Javascript?

The secret is to use CSS to control the rollover effects, and employ an altered Belcher Button. Here's how:

Edit the Belcher button and delete the red border to reveal a transparent background. Save the button as a .gif with transaparency.

Add the new gif image to your PayPal code as the payment button.

Wrap your PayPal code in a and employ CSS to control the backdrop color and also the hover colour of the div.

You can view a working example here

Here is the HTML code you'll need:

1) The CSS code - add this between the tags or to your existing CSS.

.pbtn
margin: auto;
background-color: #ff0000;
width: 460px;
height: 221px;

.pbtn:hover
background-color: #00cc00;

-->

2) The form code - add this to your sales page:

...
the rest of your PayPal form code goes here
...

Perry Belcher Picture

Important notes:

1) Use the correct DOCTYPE in your webpage HTML because the rollover effect may not work if browsers run in Quirks mode. I used this:

"http://www.w3.org/TR/html4/loose.dtd">

2) Make sure you make use of the correct image width and height as the div width and height or you'll end up with the background color spilling out of the edges of the payment button.