Skip to content
Submit a request ↗
  • There are no suggestions because the search field is empty.

How do I change button colours?

Buttons are managed at the event level in the 'Design Panel' of the CMS. Important note: buttons in the header and on webpages are managed separately.

Untitled Design - 2026-09-24T135327.229

Table of Contents

1.0 Adjust header buttons

You can customize your header buttons from the Design panel. This allows you to adjust the button's font, size, corner style and colours. 

 

1.1 Steps to adjust the header buttons:

  • Navigate to the Design panel. 
  • Select the Header section. 
  • Open the Button tab. 
  • Adjust the button settings as needed, including: 
    • Font
    • Size
    • Corners: Round or sharpen the corners
    • Background colour: Changes the overall colour of the button
    • Rollover colour: Changes the button's colour when a user hovers over it without clicking. This provides a visual indication that the button is interactive. 
    • Border colour:  Changes the colour of the border surrounding the button
  • Use the colour picker to select a colour or input your own HEX/RGB colour code
  • Select Apply once you've chosen your colour. 
  • Save your changes.
  • View your live site to confirm that the button appears as expected.

2.0 Adjust page buttons



1.1 Identify which buttons you are looking to manage:

  • Navigate to the Design panel.
  • Select the Page Style section.
    • NOTE: The Page Style section includes two button options: 
      • Button Style: Controls the standard buttons throughout your pages
      • Flow Button Style: Controls the buttons that appear on User Flow pages (i.e., Donate, Registration, Volunteer)

1.2 Adjust Button Style tab

  • Select the Button Style tab
  • Adjust the button settings as needed, including: 
    • Background colour: Changes the overall colour of the button
    • Rollover colour: Changes the button's colour when a user hovers over it without clicking. This provides a visual indication that the button is interactive.
    • Border colour:  Changes the colour of the border surrounding the button
  • Use the colour picker to select a colour or input your own HEX/RGB colour code
  • Select Apply once you've chosen your colour.
  • Save your changes.
  • View your live site to confirm that the button appears as expected.

1.3 Adjust Flow Button Style tab

  • Select the Flow Button Style tab
  • Adjust the button settings as needed, including: 
    • Background colour: Changes the overall colour of the button
    • Rollover colour: Changes the button's colour when a user hovers over it without clicking. This provides a visual indication that the button is interactive.
    • Border colour:  Changes the colour of the border surrounding the button
  • Use the colour picker to select a colour or input your own HEX/RGB colour code
  • Select Apply once you've chosen your colour.
  • Save your changes.
  • View your live site to confirm that the button appears as expected.
    2-Jun-11-2026-06-30-19-2789-PM