How to Add a Button in WordPress

Why You Need to Get This Right

WordPress powers 43% of all websites on the internet. That is not a small number. And yet, most people running WordPress sites still fumble through adding something as simple as a button.

A button is not decoration. It is direction. It tells your visitor what to do next — sign up, buy, download, read more, contact you. Without it, people land on your page and drift away.

Here is the reality: pages with a single, clear CTA button can increase conversions by up to 371% (WordStream). That is not a marginal lift. That is the difference between a page that works and a page that bleeds traffic.

Whether you are using the block editor, a page builder, or raw HTML in the classic editor — this guide walks you through every method. Pick the one that matches how you work, and you will have a working button on your page in under five minutes.

What You Need Before You Start

Before diving into the steps, make sure you have:

• Access to your WordPress dashboard (admin login)
• A page or post where you want to add the button
• A clear destination for the button — the URL it should link to
• A goal in mind — what action do you want the visitor to take?

That last point matters more than people realize. Button copy written in first person (“Get My Free Guide”) outperforms generic copy (“Submit”) by up to 90% (Unbounce). Know your goal before you touch a single setting.

How to Add a Button Using the Gutenberg Block Editor

The Gutenberg block editor is the default editing experience in WordPress since version 5.0. If you updated your WordPress install in the last few years and have not installed a page builder, this is what you are using.

Open Your Page or Post

Go to your WordPress dashboard. Navigate to Pages or Posts, then click on the page you want to edit — or create a new one by clicking Add New.

Add a Button Block

Once inside the editor, click the “+” icon to add a new block. You will see a search bar — type “Button” and select the Buttons block from the list. It will drop a styled button directly onto your page.

You can also type /button directly in the editor body and press Enter to trigger the same block instantly.

Write Your Button Text

Click on the default button text and replace it with your own. Keep it short, action-driven, and specific. Words like “Get Started,” “Download Now,” “See the Plan,” or “Book a Call” consistently outperform vague phrases like “Click Here.”

Add Your Link

With the button selected, you will see a toolbar appear above it. Click the chain/link icon, paste your destination URL, and press Enter. You can toggle whether the link opens in a new tab — useful when linking to external pages.

Style Your Button

The block toolbar and the right-hand settings panel give you control over:

• Background color — Make it stand out. Contrast matters. Red CTA buttons have been shown to outperform green ones by 21% in split tests (VWO), simply because contrast draws the eye.
• Text color — Keep it readable. White text on a dark button almost always wins.
• Border radius — A higher value gives rounded corners; zero gives sharp edges.
• Size — Use the width settings to stretch the button to full width if needed.
• Typography — Adjust font size and weight from the sidebar.

Align Your Button

By default the button is left-aligned. Use the alignment options in the toolbar to center it, right-align it, or justify it to full width. Above-the-fold CTAs receive 41% more clicks than buttons buried at the bottom of a page — so position matters as much as design.

Preview and Publish

Hit Preview to see how it looks on desktop and mobile. Once you are happy, click Update or Publish to make it live.

How to Add a Button in the Classic Editor

If you are on an older WordPress setup or have the Classic Editor plugin installed, the block editor is not available to you. Here is how to handle it.

Switch to Text/HTML View

Inside your classic editor, click the “Text” tab in the top-right corner of the editor. This switches you from visual mode to raw HTML mode.

Paste the Button HTML

Add this code wherever you want the button to appear:

<a href=”https://yoururl.com” class=”button” style=”display:inline-block; padding:12px 24px; background-color:#2A5AF8; color:#ffffff; text-decoration:none; border-radius:6px; font-weight:bold;”>Click Here</a>

Replace https://yoururl.com with your target URL and Click Here with your actual CTA text.

Customize the Inline Styles

You can adjust the background-color, padding, border-radius, and font-weight values directly in the style attribute. If your site has a stylesheet you control, you can also move these styles to your CSS file and reference the class instead.

Switch Back to Visual Mode and Preview

Click the “Visual” tab to return to the editor preview. You should see your button rendered. If it looks off, go back to Text mode and adjust the values.

How to Add a Button Using Elementor

Elementor is one of the most popular WordPress page builders, with over 12 million active installs. If you are using it, adding a button is drag-and-drop simple.

Open the Page in Elementor

In your WordPress dashboard, open the page you want to edit and click Edit with Elementor. The visual builder will load.

Find the Button Widget

In the left panel, search for “Button” in the widget search bar. You will see the Button widget appear.

Drag It Onto Your Page

Click and drag the Button widget to the section of your page where you want it. A dotted drop zone will appear to show you where it will land.

Configure the Button

In the left panel you will see three tabs — Content, Style, and Advanced.

• Content tab: Set the button text, link URL, icon, and whether the link opens in a new window.
• Style tab: Control colors, typography, padding, border radius, and hover effects.
• Advanced tab: Add CSS classes, animation on scroll, or responsive visibility rules.

Save Your Changes

Click the green Publish or Update button at the bottom of the left panel. Your button is live.

How to Add a Button Using a Plugin

If you want more control over button design without writing code or switching to a full page builder, a dedicated button plugin is a clean solution.

MaxButtons

MaxButtons is a lightweight free plugin with over 100,000 active installs. After installing and activating it from the plugin directory, you can create fully styled buttons and embed them anywhere using a shortcode.

Go to MaxButtons → Add New, configure your button visually, then copy the generated shortcode and paste it into any page, post, or widget area.

Buttonizer

Buttonizer adds floating action buttons — similar to the floating chat or call buttons you see on modern websites. It is useful when you want a persistent CTA that stays visible as the user scrolls.

When to Use a Plugin vs. Native Blocks

Use a plugin when:

• You need a consistent button style across dozens of pages
• You want advanced animation, hover states, or floating placement
• You are on a theme that does not give you enough native styling control

Stick with Gutenberg blocks when:

• You are editing one page or a small number of posts
• You want to avoid plugin bloat
• You are comfortable with basic color and typography settings

Customizing Your Button for Better Performance

A button that exists is not the same as a button that works. Here is how to close that gap.

Use Action-Oriented Language

Your button is a micro-commitment. The copy should make that commitment feel easy and rewarding. Instead of passive words like “Submit” or “Go,” use phrases like:

• “Get My Free Report”
• “Start Saving Today”
• “Show Me How”
• “Yes, Book My Spot”

Personalized CTAs convert 202% better than generic ones (HubSpot).

Match the Button Color to Your Brand — Not Just Any Color

Contrast is the goal, not a specific color. Your button should visually pop against the background of the section it sits in. If your site background is white, a deep blue or dark green button will stand out. If your background is dark, a white or bright button wins.

Keep the Size Proportional

A button that is too small gets ignored. A button that is too large feels aggressive. A safe rule: padding of at least 12px top and bottom, 24px left and right, with font size between 14px and 18px.

Add Hover Effects

When users hover over your button and it does nothing, it feels flat. A subtle background color change or slight shadow on hover signals interactivity and encourages clicks. Both Gutenberg and Elementor let you set hover states natively.

Test It on Mobile

Over 60% of web traffic now comes from mobile devices (Statista). A button that looks great on desktop can be too small to tap on a phone. Preview your page on a mobile viewport before publishing and adjust padding or font size accordingly.

Button Placement Best Practices

Where you put the button is just as important as what it says.

Above the fold — The area visible without scrolling is prime real estate. Place a primary CTA here so visitors know exactly what to do the moment they land on your page.

After a value statement — Every time you make a claim, share a benefit, or solve a problem in your copy, follow it with a button. That is the moment of maximum motivation.

At the bottom of long pages — Readers who make it to the bottom of a detailed page are highly engaged. They deserve a button too.

Avoid button overload — Too many buttons create decision fatigue. Stick to one primary CTA per section and one dominant action per page.

Common Mistakes to Avoid

Using vague link text. “Click here” tells visitors nothing. Be specific about what happens next.

Linking to a homepage. Your button should send people to a dedicated landing page or the exact resource you promised — not a generic homepage where they have to figure out what to do next.

Forgetting mobile. Test every button on at least one mobile device before publishing.

Skipping the destination check. Broken links kill trust. After publishing, click your button yourself to make sure it works.

Ignoring contrast. A light gray button on a white background is practically invisible. Always check that your button color pops.

Conclusion

Adding a button in WordPress is not complicated once you know which method matches your setup. The Gutenberg block editor handles most cases in under two minutes. Elementor gives you visual control without code. The classic editor and plugins cover edge cases for older setups or advanced requirements.

But the button is only the beginning. It is the final step in a page that earns attention — and attention is harder to earn every year. WordPress sites collectively publish over 70 million new posts per month. Standing out requires more than a well-placed CTA.

If you are serious about generating leads — not just page traffic — the next step is an outbound strategy that puts your message directly in front of the people who need what you offer. That is what Salesso is built to do.