Uncategorized

How to Customize Your PayPal Button with CSS

By May 31, 2014 6 Comments

PayPal allows you to use custom images for your “Buy Now” button so you can match it with the design of your site. But here’s a better way to do it. You don’t need to create or upload any images at all. All you need is some simple CSS code.

Step 1

Create your button through PayPal and you should get a code that looks something like this:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="C2TNWASR5JCH2">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_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

Locate the following line of code:

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

And replace it with this:

<input type="submit" value="Buy Now" name="submit" title="PayPal - The safer, easier way to pay online!" class="paypalbutton">

Now you’ve successfully replaced the image with the CSS class “paypalbutton.” If you already have a button class that you want to use, just replace “paypalbutton” with your own class. Or, create a new button style:

Step 3

Style your new button with CSS. Here’s some basic code to get you started:

.paypalbutton {
    display: inline-block;
    background-color: #2980B9;
    color: #fff;
    border-radius: 2%;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    padding: 16px 24px;
    width: auto;
}

.paypalbutton:hover {
    background-color: #3498DB;
}

 

6 Comments

  • Acacia C. says:

    Thanks for posting this easy to follow how to. I looked at a few other posts on other sites, but everyone was trying to make it more complicated than it needed to be. I was able to use this information to get my custom PayPal button up and running in a couple minutes.

  • msacco6 says:

    you rock! Thanks so much

  • Jack says:

    Hi, I like this method. Just a probably silly question, where do you put the CSS code? For some reason the actual text is showing up in my live website. I put it as is just before the closing head tag and tried before the closing body tag, but the text shows, either at the top or at he bottom. Or is there some tags I need to enter before and after the code? What am I missing

  • Christina says:

    Hi Jeremy, thank you so much for posting this! It was really helpful 🙂

  • John says:

    Nice and simple explained. I´ve been on StackOverflow to find answers.They made it so much more complicated. Thanks for this. This is just great.

Leave a Reply