Change Buttons
Squarespace organizes button styles into three types—primary, secondary, and tertiary. As you add a button block to a section, you can choose the button style you want to use. Usually, it’s best to use the same style buttons throughout to create a consistent user experience. Sometimes you may need a secondary style to differentiate side-by-side buttons. For example, you may use a button with a fill as the primary style and an outlined button as the secondary style. You may also choose to use different button colors for sections with different background colors.
How to Change Your Button Styles
Navigate to the Site Styles. (You can access the Site Styles via the Styles link under the Website tab or by clicking the paintbrush icon in the top right corner.)
Once in Site Styles, click Buttons. Select the button type you want to edit (primary, secondary, or tertiary). Then, you can customize the following:
Text – font family, style, weight, size, line height and text transform
Shape – fill or no fill; squared, rounded rectangle, pill, oval, underline, or petal
Outline – the line thickness of the outline around the button for no-fill buttons (When you have set the button to fill, the outline slider will change the padding outside the button.)
Padding – the space around text inside the button
To apply settings from one button to another, click Apply to All Button Types. Selecting Reset Button Types will revert the styles of that button to the Squarespace default.
Click Save to save the changes you have made to the button styling.
How to Change Your Button Colors
To change the button colors, you will need to go back to Colors in the Site Styles.
Once in Colors, select the theme you want to edit, scroll down to Buttons (or search for Buttons using command + F on Mac or control + F on Windows), select the button type, and select either background or text. When buttons are set to Fill, the background color will fill the button. When buttons are set to No Fill option, the background color applies to the outline and the text as well as the fill color when you hover over the button.
Click Save to save the changes you have made to the button colors.
