How to create a custom PayPal buy now button

Reading Time: 4 minutes

How to create a custom PayPal 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, both for when you’re using a page builder as well as when you need to use HTML and CSS, e.g. to use buttons in an email.

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.

Get the PayPal URL from the Email tab

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>

Create a custom button: Styling it with CSS

Open the style.css file of your child theme, 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>
anouska-hi

I'm Anouska

I help life and wellness coaches to stop struggling with code and Canva. You can spend your time and energy showing up for your clients and promoting your offers. Learn more.

Planning to launch soon?
Get my free Sales Page Blueprint!

Walk away knowing what to include on your sales page and how to structure it so your ideal clients can't help but click that buy button!

Learn what to include on your sales page and how to structure it

salespageblueprint-preview

Planning to launch soon? Get my free Sales Page Blueprint and learn what to include on your sales page and how to structure it so your ideal clients can't help but click that buy button!

Just click the button below to get it, free!