How to Create a Specialized Donate Button
donate

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 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.

romio884
October 16th, 2011 at 7:12 pm

hi there i hope you can help me, i have a verified business account with paypal but i just could’t find the option to create a donation button!!!

October 16th, 2011 at 9:28 pm

Log in to Paypal and click the following tabs in order:

1. Products and Services
2. Get Paid
3. Fundraise
4. On Website, Email, or Blog
5. Learn More
6. Scroll Down and you’ll see a picture of a donate button with some text and link beside it that says “Create Donate Button” (Just follow the steps after that.)

Hope that helps.

Lene
November 18th, 2011 at 2:20 pm

hello. i am totally green on this and are in the prosess of making my own site.
i just loved this button you have.
is it possible to get the code for making that button? loved the babyhand :)
Hope i can learn these things one day :)

November 18th, 2011 at 8:45 pm

Lene, the code is given above. If you are referring to the text and handprint, it’s just a graphic I created (That’s the image I’m referring to in the post above.) It’s actually pretty basic. Maybe you could explain a little more fully what part you are not understanding.

Lene
November 19th, 2011 at 1:14 pm

Well i have tried all day to do this, i got photoshop trial and all but i just get so irritated because i don`t understand even how to make the donate button in photoshop.
So i don`t know how the hand and text would go lol

:( I really hate to be so bad at things :) I nderstand the codes but i can`t make the picture and i think this was perfect made..all but the invest in a chid text.

Maybe this is to difficult for you to explain to a neewbie like me :)

Sam
August 8th, 2013 at 7:00 am

I liked your post , Donate buttons are really amazing . But I wanted to know how to make a button . I am not able to find the donate button on my paypal website . they are only showing buy now and subscribe and some other buttons but not donate buttons.

August 27th, 2013 at 11:07 pm

They are all under the Merchant Services tab. There is a donate button listed along with the others.

Sharon
February 5th, 2014 at 11:40 pm

Hi, please could you email me as I’m having difficulty getting the code right. I would like to email you the code I’m using so you can tell me where I’m going wrong.
I want to use the complete pink donate button with the hands and text that you have created, but when I use the code you provide with the code from paypal, it gives me this message:

ERROR INVALID INPUT:
custom image url:URLs must include at least one period but not special characters (&, \’, “, >, <, *, [, {, ], }, \#, ~, !, $, |, ^, %) or upper ASCII characters.

Please can you help, I am completely new to this x

LEAVE A COMMENT

Powered by sweetCaptcha


Anti-Spam Protection by WP-SpamFree