Making Paypal Buttons change colour on hover

Since the Paypal buttons are such an important part of getting folks to cough up, it’s imperative they behave as users might expect a link to. However the default buttons don’t change when you hover over them which, being the meticulous/analy-retentive guy that I am, I simply had to resolve.

I figured out a solution; you can see it working (probably won’t in IE6 mind) here:

http://friendsofcarnegielibrary.org.uk/join

To do this, firstly I created a CSS sprite; these are clever wee gizmos that load once so the user doesn’t have to load another image when their mouse hovers over it; likewise when they click on it (it changes for a split, but effective, second). Then CSS is used to change the image when you hover or focus over it; then again when you click on it. So! Here’s my sprite:

The default button is blue to match my theme; the hover entrenches the Paypal logo; then the active greys out. The CSS (add this to your WordPress stylesheet):

.paypalsprite{
    background: url(http://yoursite.com/your_image.png) 
    no-repeat; display: block; float: left; background-position: 0 0; 
    height: 42px; width: 157px;}

.paypalsprite:hover,.paypalsprite:focus{
    background-position: -157px 0;}

.paypalsprite:active{
    background-position: -314px 0;}

Finally, the button code. Since the button code forces the default image unless another is specified, first I created a transparent png to cover the sprite; you can snaffle it here:

Then it was simply a matter of specifying that as the default image, and adding a span around the button classed as paypalsprite:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="YOUR PAYPAL EMAIL">
<input type="hidden" name="lc" value="YOUR CURRENCY">
<input type="hidden" name="amount" value="5.00">
<input type="hidden" name="currency_code" value="YOUR CURRENCY"> <input type="hidden" name="button_subtype" value="services"> <input type="hidden" name="no_note" value="0"> <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHostedGuest"> <input type="image" src="TRANSPARENT IMAGE" border="0" name="submit" alt="PayPal ????? The safer, easier way to pay online." class="paypalsprite"> <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"> </form> 

Bingo! Just watch that cash come rolling in 8^)

The Paypal merchant agreement forms and there’s nothing to indicate you can’t edit the colour of the button, by the way.