---
title: "How to Add Animated Buttons in WordPress?"
url: https://nexterwp.com/docs/add-pro-buttons-in-wordpress/
date: 2024-02-26
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "An ordinary button is a link with a background. A button that has to carry a download, or hold attention in a hero section, usually needs more than that. Pro..."
image: https://nexterwp.com/wp-content/uploads/2024/05/pro-buttons-block-settings-overview-1024x519.jpg
word_count: 459
---

# How to Add Animated Buttons in WordPress?

## Key Takeaways

- Pro Buttons añade dos tipos de botón, call to action y download, y en páginas publicadas el tipo call to action mide unos 38 píxeles de alto mientras el tipo download mide unos 55 píxeles e incluye un icono SVG en línea.
- Nexter Blocks Pro activa Pro Buttons desde Nexter > Blocks en el escritorio de WordPress, y sin Nexter Blocks Pro activado el bloque no renderiza nada.
- Los estilos de descarga tienen estados propios: en style 5 el botón muestra texto de loading y success, pero sigue siendo un enlace que navega o descarga y no puede enviar un formulario.

An ordinary button is a link with a background. A button that has to carry a download, or hold attention in a hero section, usually needs more than that.

Pro Buttons adds the two shapes that need it most — a call to action and a download button with its own states.

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

## Before You Start

- **Edition:** **Pro** — the Pro Buttons block needs Nexter Blocks Pro.- **Block to enable:** Pro Buttons, switched on under **Nexter > Blocks** in your WordPress dashboard.

## Video Tutorial

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

## Steps

- Add the **Pro Buttons** block to your page.

![Adding the Pro Buttons block](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-activation-new-1.webp)

- Choose the **button type** — call to action, or download.

![Choosing the button type](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-design-type.webp)

- Pick a **style** for that type.

![Choosing the button style](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-extra-options-new.webp)

- Set the button **text** and its **link** or file.

![Setting the button text and link](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-accessibility-new.webp)

- Style the colours, borders and hover, then publish.

![Styling the pro button](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-style-new.webp)

## How It Behaves

The block renders one button whose markup depends on the type you choose — the download type carries more than the call-to-action type does.

- **The two types render differently.** Measured on published pages: the call-to-action type rendered a link about 38 pixels tall; the download type rendered about 55 pixels and added an inline SVG for its icon.- **Download styles have their own states.** Measured on style 5: the button rendered about 60 pixels tall and takes its own loading and success text, shown while the download runs and once it finishes. See the [animated download button guide](https://nexterwp.com/docs/animated-download-button-in-wordpress/).- **It is a link, not a form control** — it navigates or downloads; it cannot submit a form.- Measured with Nexter Blocks Pro deactivated: the block renders nothing at all.

## Limitations

- **Pro only** — measured, the block renders nothing at all without it, so a page built around it loses that section if Pro is deactivated.- **One button per block.** For a pair of buttons use two blocks in a row or a container.- **The download states are visual.** They show progress through the browser's download, not a guarantee that the file arrived.- For a plain button, the free [Button block](https://nexterwp.com/docs/add-button-in-wordpress/) is lighter and enough.

## Troubleshooting

### Nothing renders where I added the block

Measured with Nexter Blocks Pro deactivated: the block renders nothing at all. Check Nexter Blocks Pro is active and licensed.

### My download button behaves like a normal link

Check the **button type** is set to download rather than call to action — measured, the two types render different markup.

### The loading text never appears

Those states belong to particular download styles. Measured on style 5, the loading and success text are part of the button; other styles do not have them.

### The button will not submit my form

It cannot — it is a link. Use the submit button provided by your form block.

## Related Docs

- [Animated download button in WordPress](https://nexterwp.com/docs/animated-download-button-in-wordpress/)- [Add a pro paragraph in WordPress](https://nexterwp.com/docs/add-pro-paragraph-in-wordpress/)- [Add a progress bar in WordPress](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)