Style payment buttons

After you add the Payments Buttons block to your site, you can change the button color, layout and more. Learn how to style your payment buttons in this guide.

Change the background and text color of the payment button by following these steps:

1. Click on an individual button in the Payments block.
2. In the block settings sidebar, locate the “Background & Text Color” section.
3. Click the Text Color section to change the color of the text in the button.
4. Click the Background section to change the color of the button.

Learn more about applying colors to your buttons.

Change the rounding of the edges of your button by changing the button’s radius. Follow these steps:

1. Click on an individual button in the Payments block.
2. In the block settings sidebar, locate the “Border” section.
3. Use the slider, or enter a number, to change the button’s radius.
4. Click “Save” or “Publish” in the upper-right to save your changes.

A lower number will make the button more square, and a higher number will make the corners of the button rounded.

Configure the button’s width by following these steps:

1. Click on an individual button in the Payments block.
2. In the block settings sidebar, locate the “Width settings” section.
3. Select one of the presets (25%, 50%, 75%, or 100%) or set a custom width.
4. Click “Save” or “Publish” in the upper-right to save your changes.

For example, set a button’s width to 100% to create a full width button. Or, set each button to 50% to have two buttons that take the full width of the content area, like in this example:

Follow these steps to change the payment buttons alignment:

1. Select List View in the top-left corner of the editor.
2. Click the Payment Buttons block item in the list view.
3. In the block toolbar that appears, click the “Change items justification” button.
4. Select from one of the following options:
   • Justify items left: Aligns all the buttons to the left.
   • Justify items center: Aligns all the buttons in the center.
   • Justify items right: Aligns all the buttons to the right.
   • Space between items: Spaces the buttons evenly within the Payments Buttons block.
5. Click “Save” or “Publish” in the upper-right to save your changes.

Select a preset style for your button by following these steps:

1. Click on an individual button in the Payments block.
2. In the block settings sidebar, click the Styles tab.
3. Choose between Fill and Outline for your button style.
4. Click “Save” or “Publish” in the upper-right to save your changes.

Change the font size, type, and letter case for the text in your button by following these steps:

1. Click on an individual button in the Payments Buttons block.
2. In the block settings sidebar, click the Styles tab.
3. Scroll to the Typography section.
4. Change the size of the button text, or click the three dots (⋮) to activate the Font and Letter case options.
5. Click “Save” or “Publish” in the upper-right to save your changes.

Learn more about Typography settings.

You can add formatting like bold and italics to the text in the payment button. Follow these steps to apply formatting:

1. Click on an individual button in the Payments block.
2. Highlight a portion, or all of the text, in the button.
3. Apply any of the following styles, using the block toolbar that appears:
   • Bold
   • Italic
   • The More icon includes:
     • Highlight: Change the text and background color of just the text. Use the option to change the background of a button to change the color of the button.
     • Inline Code
     • Inline Image
     • Keyboard Input style
     • Language attribute
     • Strikethrough
     • Subscript
     • Superscript
4. Click “Save” or “Publish” in the upper-right to save your changes.