Customize your site’s buttons to match your brand.

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 affect most buttons on your site.

Watch a video

This guide focuses on button styling options in version 7.1. For button styling in version 7.0, review Style buttons in version 7.0.

Button shape and fonts

When styling buttons, we recommend opening a page with a button on it so you can review the changes in the site preview as you make them. To style buttons across your site:

1. Open site styles, then click Buttons.
2. Click the button type you want to style: Primary, Secondary, or Tertiary. To learn more, review Button types.

You can set the following tweaks for each type:

• Text - The font and font styles for buttons in that tier.
• Shape - The shape and if the button has a color fill (Fill) or only an outline (No Fill).
• Outline - The outline thickness of the button for No Fill buttons. On Fill buttons, changing the outline slider changes the padding outside the button.
• Horizontal padding - The padding to the left and right of the button text.
• Vertical padding - The padding above and below the button text. This tweak won't affect button blocks set to Fill in Fluid Engine sections. Resize blocks to add vertical padding instead.

Changes save automatically. To apply the settings of one type to the other types, click Apply To All Button Types. To reset the styles of one type to the default settings, click Reset Button Styles.

Keep in mind, while you can set general shape and size styles, all buttons increase in size and change shape to accommodate text. If you include a lot of text on a button, it may appear different than expected. To ensure the most control over the look of your buttons, we recommend keeping button text under 25 characters.

Button colors

To ensure your buttons match your site's design, buttons follow your site's global colors.

• Set the button background and button text colors in the Colors panel by clicking the pencil icon on your theme.
• Each button type has its own tweaks for background and text colors in each color theme, and blocks have their own button color tweaks.
• When buttons are set to Fill, the button's background color fills the button. When buttons are set to No Fill, the button background color applies to the outline and text, and fills the button on hover.
• When using the Underline shape, set the button text color with the button background tweak. Set the button background color with the button text tweak.
• You can use different button colors on other sections by changing the color theme for sections with buttons.

To learn more, visit Changing colors.

Button types

The Buttons panel divides button styles into three types: Primary, Secondary, and Tertiary. Aside from header buttons, button blocks, and form block submit buttons, you can't change a button's type. Most buttons follow primary style settings, but you can vary the styles of button blocks throughout your site with secondary and tertiary settings.  

This is a great way to highlight the most important calls-to-action for your visitors, or to distinguish between different types of links. Use the table below to learn which types apply to which buttons.

In some cases, certain tweaks won't affect certain buttons on your site when it might otherwise disrupt your site's design. For example, to preserve the newsletter block layout, padding tweaks won't affect newsletter block buttons.

To learn how to set a button block's type, visit Button blocks.

Style buttons in version 7.0

If your site is on version 7.0, use these site-wide tweaks to edit the appearance of most buttons on your site:

1. Go to a page that uses buttons.
2. Return to the Website panel, click Design, then click Site styles.
3. Scroll down to Buttons. For button blocks, the section is called Button block (small), (medium), or (large).

Use the following tweaks:

• Button style - Choose solid, outline, or raised. For outline, the text automatically displays as either black or white on hover, depending on the button color.
• 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. It's not possible to change the text size on form block and newsletter block buttons.
• Alternate or (Overlay) - Available in some templates, set alternate colors to help buttons on background images or colors stand out.

Site-wide tweaks affect the following buttons:

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

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

• Shopping cart buttons have separate options in certain templates.
• Cover page buttons have separate button options.
• Image blocks have separate button options.
• Bedford family banner buttons are styled in the Banner section.
• Bedford family header navigation button is styled in Site navigation.
• Brine family header navigation buttons are styled in Header: primary navigation and Header: secondary navigation.