If you use PayPal to sell products or services on your website, you probably noticed that Buy Now buttons don’t change on mouse over. I believe it’s much nicer if they did. The project I currently work on require PayPal buttons, because it’s about selling services directly on a website. Here are the basic steps of defining PayPal buttons and making them change their appearance on hover.
Defining PayPal Buy Now Buttons
Creating these Buy Now buttons is easy. Just follow the step-by-step guide and you’ll get there.
If you want, you can replace the default button with a custom image, in order to better suit the look and feel of your website.
I did so but I didn’t like the outcome. I noticed the hover had no effect and that upset me a little, because I wanted the buttons to change color when hovered.
This is what I did and what you need to do too, if you want buttons that change on hover to draw attention:
- Generate the button via PayPal, then copy and paste the code on the page
- In the code, look for the following line: <input type=”image” src=”path_to/your_button.png” border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay online!”>
- Add onmouseover and onmouseout instructions just like this: <input type=”image” src=”path_to/your_button.png” onmouseover=”this.src=’path_to/your_button_on_hover.png’;” onmouseout=”this.src=’path_to/your_button.png’;” border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay online!”>
Save your page and you’re done. Don’t forget to upload your two button state images on the server. You can use ftp for that.
Note: the “onmouseover” instruction is needed for the button to return to its initial state when you move your mouse off it. If you skip to add this, your button will remain “hovered” permanently once you put your cursor over it.
Do you want to see such buttons in action?
