How to create a custom PayPal button for your website and emails

If you’ve chosen PayPal to get paid online, the default Buy Now button probably doesn’t match your brand. In this tutorial, I’m walking you through how to create a custom PayPal button you can use on your sales page, website, or email newsletters. You’ll be able to customize the colors, text, and style to fit your brand.

This post covers making a custom PayPal button with a page builder (no code required), adding your button to email newsletters, and working with HTML and CSS if you want more control. By the end, you’ll have a branded custom PayPal button ready to go.

Step 1: Create your PayPal button

First, you’ll need to set up the button in your PayPal account.

1. Log in to your PayPal account
2. Go to Pay and get paid
3. Click Create payment links and buttons

If you don’t see this option, you may need to change your PayPal account to a business account.

Step 2: Set up your custom PayPal button

Now you’ll configure the button details.

1. Select to only use the payment buttons
2. Enter the name and price of your product
3. Set other product or payment details as needed

Step 3: Set checkout options

These settings control what happens when someone clicks your button.

1. Go to Checkout
2. If it’s a digital product, you can turn off “collect customer shipping address”
3. Go to the Confirmation step. Here, you can set your success page link if you have one
4. Click Build it
5. Go to Payment Link and copy your link

Tip: If you already have older buttons set up, you can go to your saved links and buttons, click Open → View code, then click Email Link to copy the link.

Step 4: Add your PayPal button to your website

If you’re using a page builder (like Squarespace, Showit, WordPress with Beaver Builder, Divi, or Elementor (affiliate link)), here’s how to add your button:

1. Drag a button element onto your page
2. Paste your PayPal payment link into the URL or link field
3. Change the button text to something specific, like “Buy now” or “Get instant access” (specific calls to action work best)
4. Customize your button visually:

• Add an icon if you want
• Adjust background and text colors to match your brand

Most modern page builders use your site’s colors and styles by default, so your custom PayPal button should fit right in.

Step 5: Add your PayPal button to an email newsletter

Adding a button to emails is just as simple.

In most email platforms (MailerLite (affiliate link), Kit (affiliate link), and others):

1. Add a Button block to your email
2. In MailerLite, go to Elements → Button and drag to your email

1. In Kit, type “/” or click the “+” and select Button

1. Insert your PayPal link as the button URL
2. Change your button text and add an emoji if you like

If your email platform doesn’t have a button block, you can use a simple HTML link styled as a button (see examples below).

Step 6: Test your button

Always test your button before sharing it with your audience.

1. Click your button (on your site or in your email) and make sure it leads to the right PayPal checkout page
2. Double check the amount, product description, and payment process

Custom HTML and CSS for your custom PayPal button

If you don’t use a page builder or want to add a button to an email, you’ll need to use some HTML and CSS.

Here’s the basic HTML structure:

<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 styling for your button. Start with this:

.button {}

This tells the browser to show any element with a class of button using the styles you define between the curly brackets. Here are the main CSS properties you can play with:

background-color can be transparent or any color you like. You can also use background-image, but make sure it’s not too busy. Most importantly, 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 a combined property where you set the width, style, and color. For example, border: 1px solid #e00e9d;. The style can be dotted, dashed, solid, double (needs to be at least 3px to see the effect), groove (at least 2px), ridge, inset, or outset.

border-radius creates rounded corners on your buttons. If you set just one value, it’ll round all corners. You can also set multiple values to create different effects. 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).

• box-shadow: 10px 10px; creates a harsh black shadow under your button, pushed 10px to the right and bottom
• box-shadow: -10px -10px 5px #f00; creates a blurred red shadow, pushed 10px to the left and top

font-family, font-size, and font-weight style the text of your button. If you don’t set these, the button uses the default text styles of your site.

padding adds space inside the button (between the text and border).

margin adds space outside the button (between the border and surrounding elements).

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

text-transform automatically changes text to lowercase, uppercase, or capitalize, regardless of how you input it.

Also add styling for when someone hovers over your button:

.button:hover {}

This automatically takes the styling from .button, so only add the properties you want to be different on hover.

Custom PayPal button CSS examples

Replace the hex codes with your brand colors. You can find yours here.

Solid black button with white text:

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

Button text

White button with black border:

<a href="your-paypal-link" 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

Black button with white double border:

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

Button text

Black button with rounded corners:

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

Button text

Full-width centered button:

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

Button text

Want the rest of your course tech set up for you?

A working PayPal button is one piece of actually selling a course. You also need a course platform to deliver the content, a checkout that’s tested, and an automated delivery email so students get access instantly after they buy.

If you have the content but not the setup, my Course Tech Setup Sprint handles all of that in one week: course platform with your branding, checkout, automated delivery email, and welcome sequence, all set up together. One fixed price. Submit your content on Friday, everything’s ready to sell by the next Friday.