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

This section of the guide applies to sites with our WordPress.com Personal, Premium, Business, and Commerce plans. For free sites, upgrade your plan to access this feature.

You can customize the appearance of all buttons on your site for different interactions—such as when a visitor hovers over a button, clicks it, or navigates to it using a keyboard.

To customize these button styles:

1. Visit your site’s dashboard.
2. Go to Appearance → Editor.
3. Select Styles from the left-side menu.
4. Click Blocks at the bottom of the Styles panel.
5. Search for Button and select it from the list.

6. Click the Default dropdown at the top right to choose which interaction to style:
   • Default: How buttons normally appear.
   • Hover: How buttons appear when the cursor moves over them.
   • Focus: How buttons appear when navigated to using a keyboard.
   • Focus Visible: How buttons appear with a visible outline for keyboard users.
   • Active: How buttons appear while being clicked or tapped.
7. Adjust the style settings for the selected interaction.
8. Click “Review change” to apply your changes.