---
title: "How to Add Animated Buttons in WordPress?"
url: https://nexterwp.com/docs/add-pro-buttons-in-wordpress/
date: 2024-02-26
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add attractive buttons to your WordPress website? With the Pro Buttons block from Nexter Blocks, you can add different stylish call-to-action buttons to your WordPress website...."
image: https://nexterwp.com/wp-content/uploads/2024/05/pro-buttons-block-settings-overview-1024x519.jpg
word_count: 434
---

# How to Add Animated Buttons in WordPress?

## Key Takeaways

- Pro Buttons block from Nexter Blocks allows users to add animated call-to-action and download buttons.
- Nexter Blocks offers multiple pre-designed button styles for customization.
- Users can improve accessibility by adding text in the Aria Label field for users with disabilities.

Do you want to add attractive buttons to your WordPress website? With the Pro Buttons block from Nexter Blocks, you can add different stylish call-to-action buttons to your WordPress website.

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

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](http://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a premium block you need the [PRO version of the Nexter Blocks.](http://theplusblocks.com/pricing?utm_source=tpag&utm_medium=docs&utm_campaign=text)

- Make sure the Pro Buttons block is activated, to verify this visit Nexter → Blocks → and Search for Pro Buttons and activate. 

## Learn via Video Tutorial

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

## How to Activate the Pro Buttons Block?

Go to 

- **Nexter **→ **Blocks** 

- **Search **the block name** **and** turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-activation-new-1-1024x347.png)

## Key Features

- **Two button types** - You can choose from two button types, an animated call to action button and an [animated download button](https://nexterwp.com/docs/animated-download-button-in-wordpress/).

- **Multiple animated button styles **- You can choose from multiple pre-designed button styles.

## How to Use the Pro Buttons Block?

Add the Pro Buttons block to the page. 

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-design-type-1024x192.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Advanced Buttons

From the **Advanced Buttons** tab, you have to choose the button type from the **Button Type** section. Here you’ll find two options - 

- **CTA Button** - To add an animated call to action button.

- **Download Button** - To [add an animated download button](https://nexterwp.com/docs/animated-download-button-in-wordpress/).

Let’s select the CTA Button here.

Then, from the **Style **section, you can choose from a range of button styles.

In the **Button Text** field, you can add the button text. 

On some button styles, you’ll find some additional fields to add relevant content.

From the **Alignment** section, you can align the button.

Then, in the **Link** field, you can add a link for the button.

### Extra Options

You’ll see this tab for some button styles with relevant options.

![](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-extra-options-new.png)

> *Note: The options will vary based on a selected button.*

### Accessibility

In the **Aria Label** field, you can add text to improve accessibility for users with disabilities.

![](https://nexterwp.com/wp-content/uploads/2024/02/pro-buttons-accessibility-new.png)

## How to Style the Pro Buttons Block?

To style the Pro Buttons block, you’ll find all the options under the **Style** tab.

**Advanced Button** - Here, you’ll find relevant styling options for a selected button. Options will vary based on a selected button.

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

> *Note: For some button styles, you’ll find additional tabs with their relevant styling options.*

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Pro Buttons block isn't activating?**
A: If the Pro Buttons block isn't activating, ensure that the Nexter Blocks plugin is installed and that you have the PRO version. You can check this by navigating to Nexter u2192 Blocks, searching for Pro Buttons, and turning on the toggle. If the toggle is not available, you may need to purchase the PRO version.

**Q: Are there any limitations to the Pro Buttons block?**
A: The Pro Buttons block is designed specifically for use within the Gutenberg editor and requires the PRO version of Nexter Blocks. This means it won't function as a standalone feature outside of Gutenberg, and you need to ensure that the default WordPress Block editor is active for it to work properly.

**Q: How can I import a preset template for the Pro Buttons block?**
A: To import a preset template for the Pro Buttons block, click on the Import Pre-Designed Template button after adding the block to your page. This feature allows you to quickly customize a button layout that fits your needs, saving time and ensuring a professional appearance.