How to customize your PayPal button for your website and emails

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, and for your emails, as well as when you need to use custom HTML and CSS. 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.

Step 1: Create your PayPal button

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 the button

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

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

• Click Email Link, then copy this 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), here’s how:

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:
   • 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 button should fit right in.

Step 5: Add your PayPal button to an email

Adding a PayPal button to your emails is just as simple!

In most email platforms (e.g., MailerLite, Kit):

• Add a Button block to your email
• In MailerLite, go to Elements → Button, drag to your email.

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

• Insert your PayPal link as the button URL.
• 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. (Find copy-paste HTML/CSS examples below.)

Step 6: Test your button

Always test your button before sharing it with your audience!

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

Custom HTML and CSS

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.

<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>