latest stable versions: v150827 (changelog)

Old Forums (READ-ONLY): The community now lives at WP Sharks™. If you have an s2Member® Pro question, please use our new Support System.

Making Paypal Buttons change colour on hover

Home Forums Community Forum Making Paypal Buttons change colour on hover

Tagged: , , ,

This topic contains 0 replies, has 1 voice. Last updated by  Adam Pope 3 years, 3 months ago.

Topic Author Topic
Posted: Tuesday Oct 8th, 2013 at 6:14 pm #60231
Adam Pope
Username: adampope

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:

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):

    background: url( 
    no-repeat; display: block; float: left; background-position: 0 0; 
    height: 42px; width: 157px;}

    background-position: -157px 0;}

    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="" 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…

This topic is closed to new replies. Topics with no replies for 2 weeks are closed automatically.

Old Forums (READ-ONLY): The community now lives at WP Sharks™. If you have an s2Member® Pro question, please use our new Support System.

Contacting s2Member: Please use our Support Center for bug reports, pre-sale questions & technical assistance.