Knowledge Base

Get Expert Website Hosting

Choose website reliability and expertise with SiteGround!

Home / Website Builder / Colors, Fonts & Style / How to Add a Button Color

How to Add a Button Color

Summarize this article with:
Last update: Mar 11, 2026 1 min read

We currently have two builder versions: one for sites created before {date} and another for sites created after this date. Sites still using the older builder will be automatically migrated to the newer version soon. If your site hasn’t been migrated yet, please refer to the Classic Builder section below.

  1. To change the color of a button in a specific section, first go to Site Admin > Website Builder, and press the Edit Website button.
Dashboard of a website builder showing a trial site titled "ART PRINTS" with an "EDIT WEBSITE" button.
  1. Then navigate to the page where you would like to make the change. Select the section, then click directly on the button you wish to edit.
Sidebar menu in a website builder showing options to manage Home, About, Contact Us, and Store pages.

If the button was added as a standalone component (as shown below), a toolbar will appear above it.

The design settings panel in a website builder for customizing button colors, text size, and font family.
  1. Click the pencil icon to open the button settings pop-over (note: if the button is part of another component, the button settings will appear straightaway). In the pop-over, select the DESIGN tab. This is where you can edit the Custom Background Color.
A selected button element in a website editor with a floating menu for editing, linking, and deleting.
  1. After clicking the color box, use the available palette to choose your preferred color.
Using a color picker tool in a website builder to set a custom background color for a button element.

A color palette will pop up, giving you the option to:

  • Choose a custom color
  • Select from the suggested palette
  • Reuse a previously used custom color (if available)

NOTE: The color change will only apply to the selected button. It will not be affected by global color updates.

How to Add a Button Color (Classic Builder)

To change the color of a button in a specific section, navigate to the page where you want to make the change. Select the section, then click directly on the button you’d like to edit.

Website Builder interface with the “Home” page selected in the sidebar. The user is selecting the “LEARN MORE” button on the live preview area, which is highlighted with a magnified view.

Once the button is selected, a toolbar will appear. Click the square color icon next to the “Add Link” option to open the color settings.

Magnified view of the Website Builder toolbar showing the “Button Color” setting selected for the secondary button. The background shows a marketing site header with the headline “We Take Your Business To The Next Level.”

A color palette will pop up, giving you the option to:

  • Choose a custom color
  • Select from the suggested palette
  • Reuse a previously used custom color (if available)
Website Builder interface with the button color palette open. A color picker and gradient selector are visible, allowing customization of the secondary button’s appearance. The background features a blue digital wave design and a “LEARN MORE” button preview.

NOTE: The color change will only apply to the selected button. It will not be affected by global color updates.

Share this article