set-custom-width-to-a-button-in-elementor

How to set a custom or specific width to a button in Elementor

Elementor is a great WordPress page builder. But there are some small functionalities which are missing. For example, you do not have the direct option to set a custom width to a button. But I have found an alternative way to set a custom width to a button, whether it is in specific pixels or percentage.

Being able to set a specific width to buttons will help designers greatly. Specially those designers who want their design to be pixel perfect.

In this procedure I am not going to use any external CSS codes. I will do it using the built in settings included in Elementor.

Please watch the video below, follow along to do it yourself. Or you can simply scroll down and follow the steps below the video.

To add an advanced and cool hover effect to your button please check out the Element Pack Addon plugin for Elementor. It will add an Advanced Button addon element in Elementor which will allow you to visually set cool hover animations and effects to your buttons.

Default Elementor button options

On Elementor you can either choose to set the button full-width or not. There are options to align it left, right or center. But no custom width option.

elementor button options

Setting a custom width to an Elementor button

Firstly set the button to full-width

The first step would be to make the button full-width. Simply select the button, then turn on the justified option on.

setting elementor button to full width

Set a custom button width

Then you go the advanced setting option shown in the screenshot. This option is included with all of the elements in Elementor.

After going to the setting option, under positioning you will find the width option. Under the drop down you will get the custom width option. Please check the screenshot below.

You can set a custom width in px (pixels), % (width in percentage of the container width the button is in) or VW (View Width). Just choose whichever you prefer. I would personally prefer the pixels option.

setting a custom width to a button in elementor

Aligning the button

Now that we have set a custom width to the button it lost the default alignment options. So we would need to utilize the column options to set the button either left, right or center.

Simply choose the column the button is in. In the layout options there are “Horizontal Align” options.

  • Choose “Start” to align left
  • Choose “End” to align right
  • Choose “Center” to align center
column horizontal alignment options in elementor

So this is how you can workaround to set a custom width to a button and also be able to align it the way you want. Please bookmark my website so you can come back to read more useful blog posts regarding Elementor or WordPress.