Experiencing an issue?

Customising Button Style

The Style Editor includes a Call to Action (CTA) button. If you are a marketer, you’ll likely use this button a lot on your website.

See Also

 

 

1  Customising Button settings

  1. Go to the Style Editor page.
  2. At the top of the screen, verify the Default Styles button is selected (it should be green).
  3. Scroll down to the Button area.
  4. Hover the mouse pointer on the Button section and then click the Pencil button. The Button Settings panel displays.
  5. To make the changes active across the website, click the Publish button at the top of the Style Editor page.

 

button-style-1.png

 

Button Text

Type a word or phrase into the text field. To create a button with Simplified Chinese, click the translate icon. 

 

trans-btn-1a.png

 

Content Alignment

Choose the way button text sits in the component: align left, centre justified or align right. 

Fit to Container

Check the box if you want the button's colour background colour to stretch the full width of the button component.

 

2  Customising Appearance

Click Appearance on the Settings panel. This opens a suite of tools to manage the appearance and behaviour of the CTA button.

 

 button-appear-1.png

 

Font Color

Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette. Click the box with a red line to select a transparent background. For information about branding colours, see:

Font Size

Click the plus (+) or minus (-) boxes to increase or decrease the font size. The maximum font size is 40 px. Increasing or decreasing font size changes the size of the button.

Font

Select an English and Simplified Chinese font.

Background Color

Open the Colour Picker and set the background colour. Choose one of your branding colours (if selected) or a colour from the palette.

Hover Color

Change the background colour when a mouse pointer hovers the button. Click the box and the Colour Picker opens. Choose one of your branding colours (if selected) or a colour from the palette.

Border Width

Put a border around the button. The maximum width is 10 px.

Border Type

Choose a border style: solid, broken, or dotted.

Border Color

Change the border colour. Click the box and the Colour Picker opens. Choose one of your branding colours (if selected) or a colour from the palette.

Border Radius

Add a rounded edge to border corners. Click the plus (+) or minus (-) boxes. The higher the number, the rounder the corner

 

3  Customising Spacing

Click the plus (+) or minus (-) boxes to increase or decrease the padding and margins.

 

button-space-1.png

 

4  Customising Advanced

For developers, add a Class Name to specify CSS rules. For more information, see:

Related articles