Tweet

If you are a business or blog that either requires donations or payment buttons, PayPal is the easiest and most flexible way to incorporate those into your website. I use PayPal for all of my business payments and invoices as it is convenient and safe for both my customers and myself. PayPal makes it very simple to add a Donate, Shopping Cart, or Pay Now button to your site. While some people prefer to use the built in PayPal buttons, I’m going to show you how you can really customize your payment buttons and to give them more life and to make them match your website perfectly.

I am currently working on a WordPress site design for a non-profit organization. The colors are grey and pink, and the standard PayPal button just looks a little garish. Also, I wanted to add some additional text and graphics to make it look a little more appealing and eye catching. The first thing I did was to design a simple graphic with the handprint and text to get people’s attention. This is just designed to be placed in a text widget resting directly above the actual button code itself.

I wanted the actual Donate button to look like an obvious button and be very prominent. I also wanted the button to have a hover feature as shown in the second image to the left. Below are the steps I took to create the button.

1.) I created the following image in Photoshop to use for the actual “button” to be used for PayPal and uploaded it to a folder online.

2.) I logged into PayPal, and created my donate button (go to Products and Services/Get Paid/Fund Raise/On Website, Email, or Blog/Learn More/Donate Button)
3.) After filling in the information, I chose the “add custom image” for the button design and typed in the url to my created image location.
4.) I then was able to get the auto-generated code from PayPal and pasted it into the same text widget that I put the hand print graphic I created. This is what it looks like just putting in the code for both and centering them:

<center><img src"URL-to-image-here" />
<br />
Add your auto generated code from PayPal here</center>

5.) In order to get the nice “button” effect for the actual donate button, I added the button class <a class=” button “> (with no spaces between the quotation marks) just around the code for the PayPal button itself. (To find out more on incorporating the button class into your site, click here.) Now, the code looks like this:

<center><img src="URL-to-image-here" />
<br />
<a class="button">Donate
Add code from PayPal here</a></center>

Note: The PayPal code will begin with an < and end with an /> so make sure that there are no spaces between those elements and the other code above.

So, that’s all there is to it. The possibilities are only limited by your imagination, so spice up your donate buttons and make them more attractive!

© 2011, reflectingthedesigner.com. All rights reserved.

Tweet