---
title: "How to Create a Full-Width Button in Elementor?"
url: https://theplusaddons.com/docs/full-width-button-in-elementor/
date: 2024-01-09
modified: 2026-09-10
lang: en
author: "Aditya Sharma"
description: "Do you want to make a full-width button in Elementor? A full-width button spans the entire width of its container instead of hugging its own text, which makes it easier..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Create-a-Full-Width-Button-in-Elementor_-1024x536.jpg
word_count: 691
---

# How to Create a Full-Width Button in Elementor?

## 

- The Plus Addons for Elementor Button widget adds Full-Width Button with a single toggle, and it needs no custom CSS or padding guesswork.
- Button Style offers 23 styles, and full width works with all of them while the default label is Read More.
- Full-Width Button sits under Style > Special, is off by default, and stretches the button to fill its container in the preview.
- Full-Width Button applies at every breakpoint, fills the parent container rather than the viewport, and has no global option for every button on the site.

Do you want to make a full-width button in Elementor? A full-width button spans the entire width of its container instead of hugging its own text, which makes it easier to tap on mobile and gives a call to action far more weight.

With the Button widget from The Plus Addons for Elementor you can do it with a single toggle — no custom CSS, and no need to hunt for the right padding values.

*To check the complete feature overview documentation of The Plus Addons for Elementor Button widget, [click here](https://theplusaddons.com/docs/button-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/free-elementor-buttons/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** Free — the Button widget ships in both The Plus Addons for Elementor (Free) and Pro.- **Widget to enable:** Button, switched on under **ThePlus Settings > Widgets**.

## Step 1: Add the Button widget and pick a style

In the Elementor editor, search the widget panel for **Button** and drag it into your container. On the **Content** tab, open **Layout** and choose a **Button Style**. There are **23 styles** to choose from, and full width works with all of them.

![The Button Style dropdown highlighted in the Elementor panel, with the button shown on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-button-style-wide.webp)

## Step 2: Set the button label

In the same **Layout** section, type your label into the **Text** field. The default is *Read More*, and the canvas updates as you type.

![The Text field highlighted in the Button widget, with the label updating live on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-text-wide.webp)

## Step 3: Point the button somewhere

Set **Link** to the destination URL. Leave it empty and the button still renders, but it goes nowhere.

![The Link field highlighted in the Button widget](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-link-wide.webp)

## Step 4: Turn on Full-Width Button

Switch to the **Style** tab, open the **Special** section, and turn **Full-Width Button** on. It is off by default. The button stretches to fill its container immediately in the preview.

![Full-Width Button switched to Yes in Style > Special, with the button now spanning the whole container on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-full-width-button-wide.webp)

## This Also Changes Button Size

Full width is the quickest way to control how big an Elementor button is, because the button then takes its width from the container rather than from its own text. If you want a button that is wider than its label but not edge to edge, put it in a container with a **max-width**, or reduce that container's horizontal padding to push the button wider.

For height and text size, use the Button widget's own padding and typography controls on the **Style** tab — full width only affects the horizontal axis.

## What It Looks Like

![A full-width Elementor button spanning the entire width of its container on the front end](https://theplusaddons.com/wp-content/uploads/2024/01/button-full-width-demo-1024x79.png)

## Settings Reference

| Setting | Where | Type | Default |
| ------- | ----- | ---- | ------- |
| Button Style | Content > Layout | Select, 23 styles | Style 1 |
| Text | Content > Layout | Text | Read More |
| Link | Content > Layout | URL | Empty |
| Alignment | Content > Layout | Choose, responsive | Not set |
| Full-Width Button | Style > Special | Switcher | No |

## Limitations

- **Full-Width Button has no per-device value.** It is a single switcher, so it applies at every breakpoint. If you need full width on mobile only, use Elementor's own *Width* control on the Advanced tab instead — that one does have separate tablet and mobile values.- **Width is bounded by the parent container.** The toggle adds a `full-button` class to the widget wrapper, so the button fills its container, not the viewport. A container with a max-width or heavy padding will still constrain it.- **It is a per-widget setting.** There is no global option that makes every button on the site full width.

## Troubleshooting

### The button still is not full width

Check that you flipped the toggle on the **Style** tab, not the Content tab — Full-Width Button lives under **Style > Special**. Then check the parent container: if it has a max-width or heavy horizontal padding, the button is correctly filling that narrower box.

### I cannot find the Button widget in the panel

The widget may be switched off. Go to **ThePlus Settings > Widgets** in the WordPress admin, enable **Button**, save, and reload the Elementor editor.

### It looks full width in the editor but not on the live page

This is usually cached CSS. Regenerate Elementor's files from **Elementor > Tools > Regenerate CSS & Data**, then clear any page caching or CDN layer in front of the site.

## Related Docs

Learn [how to add an AJAX load more button into Elementor](https://theplusaddons.com/docs/add-ajax-load-more-button-to-search-result-in-elementor/) search results.

Also, check the guide on [how to add continuous animation to a button](https://theplusaddons.com/docs/continuous-animation-in-button-elementor/).

- [Button widget: settings overview](https://theplusaddons.com/docs/button-widget-settings-overview/) — every control in the widget.- [Change button text on hover in Elementor](https://theplusaddons.com/docs/button-text-on-hover-in-elementor/)- [Add a button hover animation in Elementor](https://theplusaddons.com/docs/button-hover-animation-in-elementor/)

## Frequently Asked Questions

**Q: Why isn’t my button stretching full width in Elementor?**
A: The usual cause is that the toggle is in the wrong place or the parent container is constraining it. Full-Width Button lives under Style > Special, not the Content tab, and it fills the widget’s container rather than the whole viewport. If the container has a max-width or heavy horizontal padding, the button will still look narrower because it is only filling that box.

**Q: Can I make a full-width button without custom CSS?**
A: The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides a one-toggle setup for this. The Button widget stretches to fill its container when Full-Width Button is turned on, so there is no need to write custom CSS or guess padding values. That matters when you want a cleaner CTA on mobile, where a wider tap target is easier to use.

**Q: Does full width work with every Button style?**
A: The Button widget supports 23 styles, and full width works with all of them. That makes the setting useful as a layout control instead of a design limitation, because you can keep the same visual style and still change how much horizontal space the button takes. The style choice stays in Content > Layout, while full width is controlled separately in Style > Special.

**Q: What should I change if I want a button wider than its text but not edge to edge?**
A: A max-width container or reduced horizontal padding is the cleanest way to do that. Full width takes its size from the parent container, so if you want more width without touching the viewport edges, shape the container first and let the button inherit that space. For height and text size, use the Button widget’s own padding and typography controls on the Style tab.

**Q: Why does full width not work on mobile only?**
A: Full-Width Button has no per-device value, so it applies at every breakpoint. If you need different behavior on mobile only, Elementor’s own Width control on the Advanced tab is the better fit because it has separate tablet and mobile values. That distinction matters when you want one layout on desktop and another on smaller screens.

**Q: What do I do if the button looks full width in Elementor but not on the live page?**
A: Cached CSS is the first thing to suspect. Regenerate Elementor’s files from Elementor > Tools > Regenerate CSS & Data, then clear any page caching or CDN layer in front of the site. If it still looks wrong after that, compare the live page’s parent container settings, because max-width or heavy padding can make a correctly configured button appear narrower.