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 s2Member 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 couldn’t find an answer to this on the forums; that is, to get the default Paypal buttons to change colour when you hover over them; then again when you click on them. So 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:

<span class="paypalsprite">[s2Member-PayPal-Button level="3000" ccaps="" 
desc="Concession / description and pricing details here." ps="FoCL" lc="" cc="GBP"
 dg="0" ns="1" custom="yoursite.com" ta="0" tp="10" tt="D" ra="1.21" rp="1" 
 rt="Y" rr="1" rrt="" rra="1" image="THE TRANSPARENT IMAGE URL" 
 output="button" /]</span>

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

Just checked the Paypal merchant agreement forms and there’s nothing to indicate you can’t edit the colour of the button…