Design your buttons

Customize your site’s buttons by adjusting colors, fonts, borders, shadows, and more. This guide walks you through the available styling options and how to apply them.

Follow these steps to customize the buttons styles:

1. Use the List View to select the Buttons block.

2. In the block settings sidebar on the right, click the Styles icon.

3. Customize the following styles of the Buttons block:
   • Color: Choose a background color for the Buttons block. Learn more about colors.
   • Typography: Change the button font type and size. Learn more about typography.
   • Dimensions: Set padding, margin, and block spacing. Learn more about dimensions.
   • Border: Customize the border color and radius. Learn more about borders.

Follow these steps to apply styles to individual buttons within the Buttons block:

1. Use the List View to select an individual button within the Buttons block.

2. In the block settings sidebar on the right, click the Styles icon.

3. Customize the following styles:
   • Styles: Select between fill and outline for the button style.
   • Color: Choose the text and background color of the button. Learn more about colors.
   • Typography: Change the button font type, style, and size. Learn more about typography.
   • Dimensions: Set the padding around an individual button. Learn more about dimensions.
   • Border & Shadow: Customize the border color and radius, or add a drop-shadow to the button. Learn more about borders.

Along with the typography options available in the block styles, you can apply formatting to the button text by following these steps:

1. Use the List View to select an individual button within the Buttons block.
2. Highlight a portion, or all of the button text, you want to format. 

3. Select from the formatting options, including:
   • Align text (left, center, right)
   • Add a link
   • Bold
   • Italic
   • The More icon includes:
     • Highlight: Change the text and background color of just the text. Use the option to style individual buttons to change the color of the button.
     • Inline Code
     • Inline Image
     • Keyboard Input style
     • Language attribute
     • Strikethrough
     • Subscript
     • Superscript