How to Edit Buttons in WordPress (2 Easy Methods)

Buttons are where your visitors take action: buy, sign up, download or contact you. A clear, well styled button gets more clicks than a plain link.

This guide shows you how to edit buttons in WordPress two ways: with the core Buttons block that comes with WordPress, and with the free Buttons (UB) block from Ultimate Blocks. You will learn how to change the text, link, color, size, shape and hover effect of any button.

Try it: live button examples

These are real Buttons (UB) blocks. Move your mouse over them to see the hover colors.

Style 1: a filled main button next to a transparent (outline) secondary button, with 10px rounded corners.

Style 2: a pill shaped button that turns red on hover.

Each button was made by changing a few settings: color, hover color, corner radius and the Transparent option. You will find all of them in the steps below.

What can you edit on a WordPress button?

Method 1: Edit a button with the core WordPress Buttons block

Best for: quick changes to buttons you already added with the default Buttons block.

The Buttons block is a container that holds one or more single Button blocks. Settings for the whole group (alignment, orientation, wrapping) live on the Buttons block. Settings for color, text and link live on each single Button.

Step 1: Open the post or page

1. In your dashboard, go to Posts > All Posts (or Pages > All Pages).
2. Hover over the title and click Edit. The post opens in the block editor.

Step 2: Select the button

• Click the button once to select that single Button. A toolbar appears above it.
• To select the whole group of buttons, click Select parent block (the first icon in the toolbar) or pick Buttons in the List View.
• No sidebar on the right? Click the Settings icon next to the Save button at the top of the screen.

Step 3: Change the text and link

• Text: click inside the button and type. See more tips in how to change button text in WordPress.
• Link: click the link icon in the toolbar, paste the URL and press Enter. Turn on Open in new tab if you need it. Our guide on how to change a button link covers this in detail.
• Alignment: select the parent Buttons block and use Change items justification in the toolbar to place buttons left, center or right. Read how to center a button in WordPress for more.

Step 4: Change the style, color and size

With a single Button selected, the sidebar shows its style controls:

• Styles: switch between Fill and Outline. Your theme may add more styles.
• Color: set the text color and the background color, or apply a gradient. See how to change button color in WordPress and how to create gradient buttons.
• Typography: change the font, size, weight, letter case and letter spacing.
• Dimensions: set a percentage width and change the padding to make the button bigger or smaller. More in how to change the button size.
• Border & Shadow: add a border, round the corners with the radius setting, and add a shadow.

Step 5: Set the hover, focus and active styles (WordPress 7.1 and later)

1. Select the single Button.
2. Open the state selector at the top of the block settings sidebar and choose Hover, Focus or Active.
3. Change the color, background, typography, border or dimensions for that state. Show state on canvas is on by default, so you see the hover look in the editor.
4. Switch back to the default state to keep editing.

These state styles apply only to the button you set them on. On older WordPress versions you need custom CSS or a block plugin instead, as shown in how to add hover effects to buttons.

Step 6: Check the Advanced settings and save

• Open Advanced at the bottom of the sidebar to set an HTML anchor, extra CSS classes, or a Link relation such as nofollow or sponsored for affiliate links.
• Click Save and preview the page on desktop and mobile.

How to edit all buttons on your site at once

On a block theme, go to Appearance > Editor, open Styles, then choose Blocks > Button. Changes here apply to every core button that has no custom style of its own. In WordPress 7.1 and later you can set site-wide hover and focus styles for buttons here too.

On a classic theme, look for button settings in Appearance > Customize or your theme’s options panel.

Method 2: Edit buttons with the Ultimate Blocks Buttons (UB) block

Best for: buttons with icons, simple hover colors, nofollow or sponsored links, and fixed or full width layouts.

Ultimate Blocks is a free block plugin active on 50,000+ WordPress sites, rated 4.9 out of 5 from 700+ reviews on WordPress.org. Its Buttons (UB) block puts every button setting in one place, including options the core block does not have.

Step 1: Install Ultimate Blocks

1. Go to Plugins > Add New Plugin.
2. Search for Ultimate Blocks, then click Install Now and Activate.

Step 2: Add the block or convert your existing button

• New button: click the + (Block Inserter), search for Buttons (UB) and click it. Type your button text.
• Existing core button: select the Buttons block, click Transform in the toolbar and choose Buttons (UB). The text, link and colors carry over.

Step 3: Edit the link options

Select a button and click the link icon in the toolbar. Paste the URL, then tick any of these boxes:

• Open Link in New Tab
• Add Nofollow to Link for paid or untrusted links
• Mark link as sponsored for affiliate links, as Google recommends

Click the + next to the last button to add another one. This is the easiest way to add two buttons side by side.

Step 4: Set the layout, width and icon (Settings tab)

• Layout: choose the justification (Left, Center, Right or Space between) and the orientation (row or stacked).
• Width & Size: set Button Width to Fixed (your exact width), Flexible (fits the text) or Full (fills the container).
• Icon: pick an icon from the library and place it on the left or right of the text. Learn more in how to add icons to buttons.

Step 5: Style the button (Styles tab)

• Button Styling: turn on Transparent for an outline button, like the second button in the demo above.
• Color: use the Normal and Hover tabs to set the button color and text color for each state.
• Typography: font, size, weight, line height, letter spacing and letter case.
• Border: set Button Radius for all corners or each corner, and add a shadow. A high radius gives a pill shape.
• Dimension Settings: change Button Padding to resize the button and Block Spacing to set the gap between buttons.

Click Save, and your edited button is live. The Buttons (UB) block documentation lists every setting.

The Buttons (UB) block is free. Ultimate Blocks Pro adds Fade and Wipe hover transition animations to buttons, plus Saved Styles so you can reuse a button design on every post, and Visibility Control and Animation for all blocks. Plans start at $39/year for one site, with a 30-day money-back guarantee.

Why can’t I edit my button?

• The sidebar is closed. Click the Settings icon at the top right of the editor.
• The button is in a synced pattern. Changes must be made to the original pattern, which updates every copy.
• The button is in your header or footer. On a block theme, edit it in Appearance > Editor. See how to add a button to the header menu.
• A page builder or shortcode made it. Edit it in that builder, or replace it with a block. Our guide to WordPress button shortcodes explains the options.

Want even more button styles? Compare the options in our list of the best WordPress button plugins.

Supercharge Your WordPress Block Editor!

Try Free

Get Pro

Frequently asked questions

Final thoughts

For quick text, link and color changes, the core WordPress Buttons block is all you need. For icons, easy hover colors, sponsored links and full width buttons, the free Ultimate Blocks Buttons (UB) block is the faster choice.

Your next step: open your most important page and give its main button a clear label and a hover color. To learn the basics of the default block, read how to use the WordPress Buttons block.