The Perry Belcher Button with roll over effects for PayPal

Colin Evans · 02-25-2009, 05:31 AM

How to Create PayPal Buttons Using The Perry Belcher Button With Roll Over Effects

Perry Belcher revealed his payment button at The Belcher Button | Perry Belcher. Split tests showed an increase in response of 35 to 320% over any other buy button tested.

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

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

How do you do it, especially if you are using PayPal, and have no idea how to use Javascript?

The trick is to use CSS to control the roll over effects, and use a modified 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 <div></div> and use CSS to control the background color and the hover color of the div.

You can view a working example here

Here is the HTML code you will require:

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

<style type="text/css">

</style>

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

<div class="pbtn">

<form action="https://www.paypal.com/cgi-bin/webscr" method="post"> ...
the rest of your PayPal form code goes here
... </form>

</div>

Important notes:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

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

Kalidasa · 02-25-2009, 05:41 AM

I have been trying for weeks to find out how to do this. Thanks! I just hope my limited technical ability will let me actually make it work.

Valeriu Popescu · 02-25-2009, 05:42 AM

Gooooood... but there is a BIG difference between an order button and one for a free offer.

As I always said, TEST yourself and DO NOT count on others.

Valeriu

Colin Evans · 02-25-2009, 09:34 AM

Quote:

Originally Posted by Kalidasa

I have been trying for weeks to find out how to do this. Thanks! I just hope my limited technical ability will let me actually make it work.

If you encounter problems just let me know and I'll help you get it working.

Quote:

Originally Posted by Valeriu Popescu

Gooooood... but there is a BIG difference between an order button and one for a free offer.

As I always said, TEST yourself and DO NOT count on others.

Valeriu

You're right... Testing is important.

The basic concept behind the CSS controlled Belcher Button can be used for any button, and it's easy to change for split testing different colors, buttons etc.

Kevin AKA Hubcap · 02-25-2009, 12:31 PM

Besides changing the border color you could test a saying.

For instance, if you're selling something i the fitness niche you can have a similar "buy now" button that changes to "lose weight now" or something similar ( I know its not the best eample but it's all I could come up with off the top of my head

).

The Copy Nazi · 06-14-2009, 04:32 PM

Colin, that's pretty cool what you've done there but I dunno about leaving off the dashed red border. Perry Belcher tested that and found the addition of it increased sales too. He says he exhaustively tested every element of the button. Is there a way to have the rollover as well as the dashed border? That would be très cool.

I quite like Kevin Hubcap's idea for the text changing on rollover too. Son of Belcher Button?

GarrieWilson · 06-14-2009, 04:51 PM

If you want the Becher Button with the mouse over ability and able to change the verbage and pricing on the fly, visit:

Belcher Button: Redux | garriewilson.com

It also links the entire order area - even the background and takes about 30 seconds to install to your order pages.

Yes, it's my blog but no opt-in is required to download it.

Garrie

Loren Woirhaye · 06-14-2009, 05:12 PM

I tested Eric Graham's button and found it did NOT work
with Internet Explorer - in fact when implemented
according to instructions on the blog the button not
only did not change border colors, it invalidated the
"clickability" of the graphic, making response for the
IE user impossible.

I didn't check every detail. As soon as I uncovered
this issue I posted a comment on the blog where
the method was explained (comment was not
published), and discontinued use. I'm still playing
with it on one form I have... and can't say the button
feature always fails with IE7, but I am concerned
about the issue, obviously.

Always test these sorts of things for cross-browser
compatibility. You could be running ads 40% or more
of your visitors are unable to act on.

TroyNotes · 10-16-2009, 04:22 AM

I created a version you might be interested in. I call it the Ultimate Belcher Button, another member called it BABB (Bad A** Belcher Button)

- it has animated rollover and press
- works in every major browser
- it scales up and down (recreated in Flash/vector)
- it's half the size
- adjustable price text
- it's free
- it's cleaned up (no dithering)

I"m still to new to post links here but you can find it easy just by searching google for "Ultimate Belcher button UBB"

milan · 10-16-2009, 07:58 AM

Quote:

Originally Posted by TroyNotes

I created a version you might be interested in. I call it the Ultimate Belcher Button, another member called it BABB (Bad A** Belcher Button)

- it has animated rollover and press
- works in every major browser
- it scales up and down (recreated in Flash/vector)
- it's half the size
- adjustable price text
- it's free
- it's cleaned up (no dithering)

I"m still to new to post links here but you can find it easy just by searching google for "Ultimate Belcher button UBB"

That's what I call a good first post

Thanks Troy. Here is the link

TroyNotes · 10-17-2009, 04:09 AM

Wow Big Thanks for linking people up, I've already had like 20 people from the Warrior Forum get it!

Got a request to add sound for the rollover/rollout and mousedown/up so it's going to get even better!

ab420 · 03-23-2010, 04:44 PM

Thanks Colin, it works perfectly!

RocksIT · 03-23-2010, 09:31 PM

Anyone know how to code these into Oscommerce/CRELoaded websites? I've been wanting to try this for awhile on some of my sites...

mmurtha · 03-23-2010, 09:40 PM

Hey you guys - you rock!

Thanks for all the directions to the different effects.

tpw · 11-22-2011, 07:54 AM

This thread was originally resurrected by a spammer, but I must admit, this thread was worth resurrecting for once.

XXXXXXXX · 11-29-2011, 02:10 PM

Thanks to TroyNotes for a great tool!!!

X

Snow_Predator · 11-29-2011, 03:53 PM

I personally wouldn't rely on the Belcher Button. He claims that it worked well for his own niche or niches.

Firstly, just because it worked for him in his own unique circumstances (niche, method of communication, product for sale etc), doesn't mean it will work for me. I tried it in the weight loss niche and it didn't work nearly as well as a simple large text link saying 'Click Here To Buy *Product Name* For $*Product Price*'

The Belcher button may look nice, attractive and clickable, but that's no reason to suggest it converts better than something more simple. Just like a flashy website tends not to convert as well as a simple one.

Also, Belcher claims to have tested this button to death with excellent results, but who knows if these claims are true?

Bottom line - do your own testing and see what works best for your own unique situation

ServerBite · 12-15-2011, 03:23 AM

Quote:

Originally Posted by Snow_Predator

Bottom line - do your own testing and see what works best for your own unique situation

Amen to that!

I have lost count of all the guru recommendations I´ve tried only to find that their tactics was just applicable to their special situation.

But most often the faulty recomendations come from people who aren´t selling anything, just theorizing over marketing and regurgatating what they´ve read or heard and making a living as "advisors".

But thats a different topic!

02-25-2009, 05:31 AM	#1
Colin Evans Advanced Warrior War Room Member Join Date: May 2003 Location: Still Looking... Currently back in Zim... Posts: 674 Thanks: 117 Thanked 64 Times in 28 Posts Social Networking	The Perry Belcher Button with roll over effects for PayPal How to Create PayPal Buttons Using The Perry Belcher Button With Roll Over Effects Perry Belcher revealed his payment button at The Belcher Button \| Perry Belcher. Split tests showed an increase in response of 35 to 320% over any other buy button tested. In his blog post titled 'The ULTIMATE Submit Button REVEALED! Putting all the Pieces Together…' Eric Graham (The Copy Doctor) revealed that using roll over effects on a button can increase response rates by up to 46.5% So if you use the Belcher button, roll over effects could increase your sales even more. How do you do it, especially if you are using PayPal, and have no idea how to use Javascript? The trick is to use CSS to control the roll over effects, and use a modified 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 <div></div> and use CSS to control the background color and the hover color of the div. You can view a working example here Here is the HTML code you will require: 1) The CSS code - add this between the <head></head> tags or to your existing CSS. <style type="text/css"> <!-- .pbtn { margin: auto; background-color: #ff0000; width: 460px; height: 221px; } .pbtn:hover { background-color: #00cc00; } --> </style> 2) The form code - add this to your sales page: <div class="pbtn"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> ... the rest of your PayPal form code goes here ... </form> </div> Important notes: 1) Use the correct DOCTYPE in your webpage HTML because the roll over effect may not work if browsers run in Quirks mode. I used this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2) Make sure you use the correct image width and height as the div width and height or you'll end up with the background color spilling out from the edges of the payment button.
	Sig not working today - too hung over...

02-25-2009, 05:41 AM	#2
Kalidasa HyperActive Warrior War Room Member Join Date: Nov 2007 Location: , , . Posts: 230 Thanks: 7 Thanked 13 Times in 13 Posts	Re: The Perry Belcher Button with roll over effects for PayPal I have been trying for weeks to find out how to do this. Thanks! I just hope my limited technical ability will let me actually make it work.
	Feel better. Natural back pain relief Kalidasa's Self Adjusting Technique. http://SelfAdjustingTechnique.com

02-25-2009, 05:42 AM	#3
Valeriu Popescu "Working On A Dream" War Room Member Join Date: Dec 2002 Location: Alderaan Posts: 419 Thanks: 13 Thanked 2 Times in 2 Posts Social Networking	Re: The Perry Belcher Button with roll over effects for PayPal Gooooood... but there is a BIG difference between an order button and one for a free offer. As I always said, TEST yourself and DO NOT count on others. Valeriu
	Web 2.0 Joint Venture Secrets EXPOSED System => Learn How To Design A Joint Venture Strategy That Gets You Tons Of New Customers and Pulls In Amazing Profits! * Discover How To Make Up To $1,000 Every Week With This FREE Online Toolkit!* >>> Local Internet Marketing Services - Consumers Are Searching The Internet Right Now Looking For Your Product Or Service! Are You There? We offer: Local Maps Submission, Internet Marketing Consulting, SEO and SMM services.

02-25-2009, 12:31 PM	#5
Kevin AKA Hubcap Flyin' Low & Slow War Room Member Join Date: Nov 2008 Posts: 1,189 Thanks: 56 Thanked 177 Times in 132 Posts	Re: The Perry Belcher Button with roll over effects for PayPal Besides changing the border color you could test a saying. For instance, if you're selling something i the fitness niche you can have a similar "buy now" button that changes to "lose weight now" or something similar ( I know its not the best eample but it's all I could come up with off the top of my head).

06-14-2009, 04:32 PM	#6
The Copy Nazi Mal Lambe War Room Member Join Date: Jan 2009 Location: The Bunker, Paris Posts: 2,281 Blog Entries: 2 Thanks: 704 Thanked 1,250 Times in 597 Posts Social Networking Contact Info	Re: The Perry Belcher Button with roll over effects for PayPal Colin, that's pretty cool what you've done there but I dunno about leaving off the dashed red border. Perry Belcher tested that and found the addition of it increased sales too. He says he exhaustively tested every element of the button. Is there a way to have the rollover as well as the dashed border? That would be très cool. I quite like Kevin Hubcap's idea for the text changing on rollover too. Son of Belcher Button?
	"By offending nobody, you impassion nobody" - Gary Halbert

06-14-2009, 04:51 PM	#7
GarrieWilson GarrieWilson.com War Room Member Join Date: Jul 2006 Location: Mount Vernon, IL Posts: 4,226 Blog Entries: 20 Thanks: 481 Thanked 299 Times in 184 Posts Social Networking	Re: The Perry Belcher Button with roll over effects for PayPal If you want the Becher Button with the mouse over ability and able to change the verbage and pricing on the fly, visit: Belcher Button: Redux \| garriewilson.com It also links the entire order area - even the background and takes about 30 seconds to install to your order pages. Yes, it's my blog but no opt-in is required to download it. Garrie
	How to Write Tiny, Small Reports That Sell Like Crazy Are you ready to be a WSO Winner? Invoke Barely Ethical Brainwashing Tactics

06-14-2009, 05:12 PM	#8
Loren Woirhaye Who'm I kidding? War Room Member Join Date: May 2006 Location: Easthampton, Massachusetts Posts: 4,542 Blog Entries: 15 Thanks: 117 Thanked 904 Times in 651 Posts Social Networking Contact Info	Re: The Perry Belcher Button with roll over effects for PayPal I tested Eric Graham's button and found it did NOT work with Internet Explorer - in fact when implemented according to instructions on the blog the button not only did not change border colors, it invalidated the "clickability" of the graphic, making response for the IE user impossible. I didn't check every detail. As soon as I uncovered this issue I posted a comment on the blog where the method was explained (comment was not published), and discontinued use. I'm still playing with it on one form I have... and can't say the button feature always fails with IE7, but I am concerned about the issue, obviously. Always test these sorts of things for cross-browser compatibility. You could be running ads 40% or more of your visitors are unable to act on.
	HOT! $25,000,000/yr Copywriter's Secret Book—FREE! \| The "Automated Free Traffic Formula" ArticleBot Secrets Revealed! Breakthrough Marketing Blog (+ goodies) CopyWriting Services

10-16-2009, 04:22 AM	#9
TroyNotes Info+Automation Wrangler War Room Member Join Date: Oct 2009 Location: Los Angeles Posts: 43 Blog Entries: 1 Thanks: 9 Thanked 17 Times in 8 Posts Social Networking	Re: The Perry Belcher Button with roll over effects for PayPal I created a version you might be interested in. I call it the Ultimate Belcher Button, another member called it BABB (Bad A** Belcher Button) - it has animated rollover and press - works in every major browser - it scales up and down (recreated in Flash/vector) - it's half the size - adjustable price text - it's free - it's cleaned up (no dithering) I"m still to new to post links here but you can find it easy just by searching google for "Ultimate Belcher button UBB"

10-17-2009, 04:09 AM	#11
TroyNotes Info+Automation Wrangler War Room Member Join Date: Oct 2009 Location: Los Angeles Posts: 43 Blog Entries: 1 Thanks: 9 Thanked 17 Times in 8 Posts Social Networking	Re: The Perry Belcher Button with roll over effects for PayPal Wow Big Thanks for linking people up, I've already had like 20 people from the Warrior Forum get it! Got a request to add sound for the rollover/rollout and mousedown/up so it's going to get even better!

03-23-2010, 04:44 PM	#12
ab420 Active Warrior War Room Member Join Date: Mar 2010 Location: MA, USA Posts: 60 Thanks: 17 Thanked 6 Times in 6 Posts Social Networking	Re: The Perry Belcher Button with roll over effects for PayPal Thanks Colin, it works perfectly!
	High Quality Backlink Packet \| High Quality Backlink Service \| SEO Arsenal

03-23-2010, 09:31 PM	#13
RocksIT HyperActive Warrior Join Date: Feb 2006 Location: , , USA. Posts: 144 Thanks: 2 Thanked 6 Times in 6 Posts	Re: The Perry Belcher Button with roll over effects for PayPal Anyone know how to code these into Oscommerce/CRELoaded websites? I've been wanting to try this for awhile on some of my sites...
	Atlanta Jobs Insurance Quotes Interior Design Poker Chips

03-23-2010, 09:40 PM	#14
mmurtha Senior Warrior Member War Room Member Join Date: Dec 2005 Location: Hubbard, Ohio, USA. Posts: 4,387 Thanks: 333 Thanked 113 Times in 89 Posts Social Networking Contact Info	Re: The Perry Belcher Button with roll over effects for PayPal Hey you guys - you rock! Thanks for all the directions to the different effects.

11-22-2011, 07:54 AM	#15
tpw Bill Platt War Room Member Join Date: Jul 2004 Location: Stillwater, Oklahoma, USA. Posts: 6,913 Blog Entries: 4 Thanks: 5,605 Thanked 4,860 Times in 2,230 Posts Social Networking Contact Info	Re: The Perry Belcher Button with roll over effects for PayPal This thread was originally resurrected by a spammer, but I must admit, this thread was worth resurrecting for once.
	Subscribe to Bill Platt - Online Marketing -- Offline Marketing & Consulting Products at: Redneck Marketers and Writing Puzzle Live NOW: Professional Kindle Marketing (Affiliates: go here) Keep Ken Strong

11-29-2011, 02:10 PM	#16
XXXXXXXX HyperActive Warrior War Room Member Join Date: Feb 2010 Location: Vegas Posts: 260 Thanks: 36 Thanked 32 Times in 26 Posts	Re: The Perry Belcher Button with roll over effects for PayPal Thanks to TroyNotes for a great tool!!! X
	Discover How To Create The Targeted, On-Demand Traffic That Your Internet Business NEEDS.....Literally When Ever You Want It!!

11-29-2011, 03:53 PM	#17
Snow_Predator HyperActive Warrior War Room Member Join Date: Feb 2009 Posts: 378 Thanks: 247 Thanked 59 Times in 39 Posts	Re: The Perry Belcher Button with roll over effects for PayPal I personally wouldn't rely on the Belcher Button. He claims that it worked well for his own niche or niches. Firstly, just because it worked for him in his own unique circumstances (niche, method of communication, product for sale etc), doesn't mean it will work for me. I tried it in the weight loss niche and it didn't work nearly as well as a simple large text link saying 'Click Here To Buy Product Name For $Product Price' The Belcher button may look nice, attractive and clickable, but that's no reason to suggest it converts better than something more simple. Just like a flashy website tends not to convert as well as a simple one. Also, Belcher claims to have tested this button to death with excellent results, but who knows if these claims are true? Bottom line - do your own testing and see what works best for your own unique situation