Information Handyman

Intranets | Community Management | Data

Making Paypal Buttons change colour on hover

October28

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????¦

posted under Internet tips
One Comment to

“Making Paypal Buttons change colour on hover”

  1. Avatar April 1st, 2015 at 1:10 pm Paddy Crowe Says:

    This is exactly the code i was looking for . thanks so much!


Email will not be published

Website example

Your Comment: