How to create a custom PayPal buy now button

If you’ve chosen PayPal to get paid online, the way the default Buy Now button looks might not look so great on your sales page. In this tutorial, I’m showing you how to create a custom PayPal button, for your website using a page builder as well as when you need to use HTML and CSS, e.g. to use buttons in an email. You will also be able to change the PayPal button text if you follow these steps. At the bottom of this post, I’m sharing examples of how you can create your own button style with CSS.

You’ll need to set up a product (which can be anything as long as it has a name and a price). To do so, go to Manage Buttons under Seller tools. If you don’t have Seller Tools, you may have to change your PayPal account to a business account. Then click Create New Button (or update an existing one by using the Action dropdown for existing buttons).

For products, you’ll want to use the Buy Now button type. Input the product name in Item name, set the price, and go through the steps. You can skip 2 if it’s not a physical item, but make sure the Save button at Paypal is checked so you can edit the button later. With the Customize advanced features, you can add URLs to pages on your website when people have finished the payment process (and also a different page if they cancel).

Click Create button. The URL you need is in the Email tab.

New business accounts (2021)

I received some questions from people with new PayPal business accounts that didn’t see the Email tab. If you don’t see an Email option, you can still get the URL you need from the Website code. Take a look at the bolded pieces of the Website code below:

<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="BUTTON-ID-HERE">
<input type="image" src="https://www.paypalobjects.com/en_US/NL/i/btn/btn_buynowCC_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>

You might see from the Email tab screenshot that the URL is combined from the parts of Website code that I bolded. Combine it like so:

https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BUTTON-ID-HERE

That should get you the same URL as would otherwise be on the Email tab. You might be able to just get the button ID from your Website code and paste it at the end of the above URL, but I don’t know for sure if anything else has changed with new PayPal business accounts.

Using the URL

You can simply use that URL in the button code to create a button for your WordPress site using the button element in a page builder such as Divi, Elementor, or Beaver Builder. If you don’t use a page builder or want to add a button to an email, you’re going to have to use some HTML and CSS.

Insert a link on your page or email, and add a class to the code to read something like this:

<a href="url" class="button">Text of button</a>

Style your custom PayPal button with CSS

Open the Custom CSS setting for your website, or the CSS file depending on what you’re using to build your website, and add some styling for your button:

.button {}

This tells the browser to show any element with a class of button to use the styles defined between the curly brackets. In between the curly brackets, play around with a combination of these to create the style you like:

background-color can be transparent or any color you like. You can also use background-image, but make sure it’s not too busy. Above all, the text on your button should be easy to read.

Example: background-color: #000; (black)

color will be the color of the text on your button, and also the color of the border if you don’t define a separate border color.

Example: color: #fff; (white)

border is actually a combined property, in which you set the width, style and color of the border, for example 1px solid #e00e9d.

The style (“solid”) can be dotted, dashed, solid, double (needs to be at least 3px to see the effect), groove (at least 2px), ridge, inset or outset. Example: border: 1px dotted #f00; (red)

border-radius creates rounded corners on your buttons. If you set just one value, it’ll round all corners, but you can also set multiple values to create different effects on the rounded corners, for example border-radius: 5px 0 would create rounded corners on the top left and bottom right, with square corners on the top right and bottom left. You can define up to 4 values (in the order top-left, top-right, bottom-right, bottom-left), if you define less than 4, it’ll repeat itself, so 5px 0 shows as 5px 0 5px 0. You can also define 3, for example 5px 0 10px would show as 5px 0 10px 0. (the 4th repeats the 2nd).

Example: border-radius: 5px; (all corners rounded)

box-shadow allows you to create a shadow under or inside your button. Values are horizontal position, vertical position, blur (optional), spread (optional) and color (optional, default is black). For the horizontal and vertical positions, positive values (i.e. 10px) push it to the right (horizontal) and bottom (vertical), negative values can be used to position the shadow in the opposite direction.

Examples:
box-shadow: 10px 10px; (will create a harsh black shadow under your button, pushed 10px to the right and bottom).
box-shadow: -10px -10px 5px #f00; (will create a blurred red shadow under your button, pushed 10px to the left and top).

font-family, font-size and font-weight can be used to style the text of your button. If you don’t set these, the button uses the default text styles of your site (or the container element the button is located in).

padding adds space inside the button (if you have a border, this is space between the text and the border)

margin adds space outside the button (if you have a border, this is space between the border and elements surrounding your button).

text-decoration can be none, underline, overline or line-through. (Please don’t use line-through, it’ll make the text harder to read).

text-transform can be used to automatically change the text in your button to lowercase, uppercase or capitalize, so no matter how you input the text on your button, it’ll change to uppercase (if you set this to uppercase). Lowercase will set all letters to lowercase, uppercase will set all letters to UPPERCASE, and capitalize will Capitalize The First Letter Of Each Word.

Also add some styling to change the look of the button when someone hovers (mouse over) it using

.button:hover {}

It’ll automatically take the styling from .button, so only add the styling you want to be different on hover.

Create a custom PayPal button: CSS Styling examples

Replace the hex codes (#000 for black and #fff for white) with your brand colors.

Button text

<a href="#" style="background-color: #000; color: #fff; display: inline-block; padding: 10px 20px; margin: 10px 0;">Button text</a>

---

Button text

<a href="#" style="background-color: #fff; color: #000; border: 1px solid #000; display: block; padding: 10px 20px; margin: 10px auto; width: fit-content;">Button text</a>

---

Button text

<a href="#" style="background-color: #000; color: #fff; border: 3px double #fff; display: inline-block; padding: 10px 20px; margin: 10px 0;">Button text</a>

---

Button text

<a href="#" style="background-color: #000; color: #fff; border-radius: 10px; display: inline-block; padding: 10px 20px; margin: 10px 0;">Button text</a>

---

Button text

<a href="#" style="background-color: #000; color: #fff; display: block; padding: 10px 20px; margin: 10px 0; text-align: center;">Button text</a>