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. Defining buttons was pretty easy in PayPal. I was even able to replace the default button with an image I created, which I think fits better the look and feel of the page. Then 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 do something 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? Check them out here.
