---
title: "How to Add Buttons in WordPress?"
url: https://nexterwp.com/docs/add-button-in-wordpress/
date: 2024-03-01
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "A button is the one element on a page whose whole job is to be clicked, so it has to look clickable and go somewhere sensible. The Button block gives..."
image: https://nexterwp.com/wp-content/uploads/2024/03/How-to-Add-Buttons-in-WordPress_-1024x519.jpg
word_count: 434
---

# How to Add Buttons in WordPress?

A button is the one element on a page whose whole job is to be clicked, so it has to look clickable and go somewhere sensible.

The Button block gives you the text, the link and the styling in one place, without a row of custom CSS classes.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-button/)

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Button, switched on under **Nexter > Blocks** in your WordPress dashboard.

## Video Tutorial

https://www.youtube.com/watch?v=vr9cT9_9EYY

## Steps

- Add the **Button** block to your page.

![Adding the Button block](https://nexterwp.com/wp-content/uploads/2024/03/Nexter-Blocks-Button-Activation-5.webp)

- Type the button **text**.

- Enter the **link**, and choose whether it opens in a new tab.

- Style the button — background, text colour, padding, border and hover states.

![Styling the button](https://nexterwp.com/wp-content/uploads/2024/03/button-style-1.webp)

- Publish and check the link goes where you expect.

## How It Behaves

The Button block renders a link styled as a button — it is an anchor, not a form control, so it navigates rather than submits.

- **It is a real link.** Measured on a published page: the block renders `a.tpgb-btn-link` wrapping the button text, and the **open in new tab** setting is written onto it.- **An unset link goes nowhere useful** — measured, the default is `href="#"`, which reloads the top of the same page. Always set the destination.- **An image can sit inside the button** — measured, choosing the image icon type rendered an `<img>` within the button.- Measured with Nexter Blocks Pro deactivated: this block renders identically. It is a free block.

## Limitations

- **It is a link, not a form button.** It cannot submit a form — use the form block's own submit button for that.- **One button per block.** For a row of buttons, add several blocks in a row, or use a container to group them.- Button styling is per block. If you want every button on the site to match, set it once and reuse the block as a pattern.

## Troubleshooting

### The button reloads the page instead of going somewhere

The link is still at its default. Measured: an unset link renders `href="#"`. Enter the destination URL.

### The link does not open in a new tab

Switch **open in new tab** on for that link — measured, the setting is written onto the anchor as `target`.

### My button does not submit my form

It cannot. This block renders a link; use the submit button provided by your form block.

### Two buttons will not sit side by side

Each block is its own row by default. Put both inside a container or row so they share a line.

## Related Docs

- [Add a heading in WordPress](https://nexterwp.com/docs/add-heading-in-wordpress/)- [Add an icon in WordPress](https://nexterwp.com/docs/add-icon-in-wordpress/)- [Add an image in WordPress](https://nexterwp.com/docs/add-image-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)