Categories
Internet tips

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.

One reply on “Making Paypal Buttons change colour on hover”

Leave a Reply