Loading...

Blog

How to Create a Custom PayPal Button without Images

Since PayPal is such a well-known force in the e-commerce world we encounter it often. One thing we noticed is that their ‘Button Factory’ lacks the ability to create a custom button without having to upload an image. Since the default PayPal buttons normally clash with our designs, we end up creating our own custom buttons but we do it without uploading a single image. In this tutorial we will teach you a very simple method to break free from the restraints of the ‘PayPal Button Factory’ by making a small change to the default button code and adding some CSS.

Step 1: Get the original default button code from PayPal

You will need to login to your PayPal account and visit the ‘Button Factory’, then create your basic button and grab the code. Your code should look like our sample button code below.

Sample Default PayPal Button Code:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JGPNM5E634B42">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Step 2: Changing the Button Type

Find the following line of code:

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

Replace with the following:

<input type="submit" value="Add to Cart" name="submit" title="PayPal - The safer, easier way to pay online!" class="paypal_btn">

What did we just do?
We took the image submit button and turned it into a standard form submit button, we also added a class so that we can use CSS to alter its style in the next and final step.
*If you are using a different call to action or button text, make sure you change the button value.

Step 3: Styling the Custom PayPal Button with CSS

In the final step we are going style our new button with CSS. Since this is a tutorial we will show you the most basic way to style the button and provide you with a basic platform to expand upon. Have fun and creative with your buttons.

.paypal_btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 14px;
margin: 0;
background: #ff6600;
border: 0;
cursor: pointer;
outline: none;
}
.paypal_btn:hover{ background: #e05c04; }

Demo

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Leave a Comment

6 comments
LydyWalker
LydyWalker

This is awesome! But the button changes it's look from square to rounded corners when viewed on mobile. Is there a way to keep the styling the same for mobile?

lakenney
lakenney

I had a hack going on that was driving me batty! Thank you so much for this! You are awesome!

AdamRasheed
AdamRasheed

How do I get this to work this Paypal subscribe buttons?

yugacheen
yugacheen

@daddydesign @yugacheen I'm trying to do something similar with the view cart button. I'm trying to insert it in a nav bar with a modified bootstrap theme. I don't want it to be a button, just text that inherits the style of the other nav bar links. I'm having trouble with that, any ideas? Short of using developer tools to see exactly which properties the other links are inheriting and then making a custom class, is there anything else I can do?