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.

In this video, you’ll learn how to add and style buttons on your WordPress.com site using the Buttons block. It covers using the List View to manage multiple buttons, customizing color, font size, padding, radius, and style. You’ll also learn how to link buttons to pages and change the button orientation.

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.

To give your other buttons the same look, copy the styles from a button you have styled and paste them onto the others. See Copy and paste block styles.

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 States dropdown at the top right to choose which interaction to style for the main (default) screen size as well as tablet and mobile:
   • 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. Click “Review change” to apply your changes.