Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Styling buttons

Use site styles to edit the appearance of buttons on your site. You can change the color, shape, and text style, which is a great way to match calls to action to your site's visual design. To help you create a consistent look, style changes you make to buttons affect most buttons on your site.

Before you begin

How you style your site's buttons depends on your site's version.  

See Style site-wide buttons to edit these buttons:

  • Add to cart buttons
  • Button blocks
  • Donation block buttons
  • Form block submit buttons
  • Member sign up block button

See Style other buttons to edit these buttons:

  • Newsletter block buttons
  • Shopping cart icon

See Style site-wide buttons to edit these buttons:

  • Add to cart buttons
  • Button blocks
  • Donation block buttons
  • Form block submit buttons
  • Newsletter block buttons
  • Member sign up block button

See Style other buttons to edit these buttons:

  • Cover page buttons
  • Image blocks
  • Shopping cart icon
  • Template-specific banner or navigation buttons

To style the shopping cart icon, visit Shopping cart icon display. If your cart isn't appearing, see our troubleshooting tips.

Style site-wide buttons

How you style site-wide buttons depends on your site's version.

To style your site's buttons, open site styles then click Buttons. In some cases, tweaks won't affect every button on your site. For example, to preserve the newsletter block layout, the Padding tweak won't affect newsletter block buttons.

Buttons follow your site's global colors and fonts.

To edit the appearance of most buttons on your site: 

  1. In the Pages panel, select a page that uses buttons.
  2. In the Home menu, click Design, and then click Site styles.
  3. Scroll down to Buttons. For button blocks, the section will be called Button block (small), (medium), or (large).

Use the following tweaks:

  • Button style - Choose solid, outline, or raised.
  • Button shape - Choose square, rounded, or pill.
  • Button color - Change the background color of the button.
  • Button text color - Change the color of the text.
  • Button font - Change the font. The text size can't be changed for form block and newsletter block buttons.
Tip: For the Outline style, the text automatically displays as either black or white on hover, depending on the Button color.

Style other buttons

How you style other buttons on your site depends on your site's version.

Button blocks, and blocks with built-in buttons like newsletter blocks, have extra style options:

  1. Click Edit for that page.
  2. Click the block, then click the pencil icon to change the text and alignment. You can also adjust the size of button blocks.

There are a few types of buttons that have different style options:

Change the button text

To create your own calls to action, you can change the default text for most buttons on your site.

Form block and newsletter block

To edit the submit button on form and newsletter blocks:

  1. Double-click the block to open the block editor.
  2. In the Content tab, edit the text in the Button text field.

Add to Cart button

To edit the add to cart button for a product:

  1. Double-click the product to open the product editor.
  2. Click Custom Button, then switch the Custom Button Label toggle on.
  3. Edit the text in the Label field.
  4. Click Apply.

Button block

To edit the text on a button block:

  1. Click Edit on the page, then click into the button to edit the text directly.
  2. Alternatively, you can open the block editor and edit the Text field.

Navigation buttons (version 7.0 only)

In the Brine and Bedford families, change the header navigation button's text by updating its navigation title.

Alternate button colors

Button colors work differently depending on your site's version

An alternate color appears on buttons when you hover over them, depending on the button’s style.

To set the button’s style, edit site-wide button styles, then click Style. From the drop-down menu, select Solid or Outline.

  • If you select Solid, the button background color stays the same when hovering over it.
  • If you select Outline, the alternate background color shows on hover. The alternate color depends on your site's color settings.

Depending on your template and how your site is set up, you may see an Alternate or (Overlay) tweak in the site styles section for your button. These options appears for buttons that display over:

  • Background images, such as Index section banners
  • Background areas with colors separate from the main background, such as footers or prefooters.

Use this option to help buttons stand out over these unique backgrounds. Depending on your button's style, you may also see other Alternate and (Overlay) tweaks.

Was this article helpful?
45 out of 444 found this helpful