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.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
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.
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.
Step 3: Point the button somewhere
Set Link to the destination URL. Leave it empty and the button still renders, but it goes nowhere.
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.
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
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-buttonclass 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 search results.
Also, check the guide on how to add continuous animation to a button.
- Button widget: settings overview — every control in the widget.
- Change button text on hover in Elementor
- Add a button hover animation in Elementor
