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 that are missing. For example, you do not have the direct option to set a custom width to a button.

Regarding the button, I have found an alternative way to set custom width to a button, whether it is in specific pixels or percentages.

Being able to set a specific width for buttons will help designers greatly. Especially 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, and 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

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.

setting elementor button to full width

Set a custom button width

Then you go to 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 the 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 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 work around to set 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.

Recommended WordPress ResourceBenefits of using it
Element PackThis is a useful Elementor addon plugin that adds around 60 addon elements to your Elementor page builder. Useful elements such as the Instagram gallery, table, document viewer, iframe, and much more.
WP EngineReliable WordPress hosting. Super fast, regular automatic backups, built-in CDN for faster content delivery, top-notch security, and more!
Jupiter Multipurpose WordPress theme for ElementorImport among many 450 ready-made websites made with Elementor and customize them according to your needs. Advanced WooCommerce checkout options optimized for better conversions.
WP RocketA magical WordPress plugin that will reduce the load time of your website to less than a second. It is an all-in-one speed optimization tool. It will also improve your Google Page Insights score. As the pages load quicker your website bounce rate will decrease, and average pages on time will increase. Eventually, you will get more traffic.
Slider RevolutionThe most powerful and advanced WordPress slider plugin ever. Over 200+ ready eye candy slider templates to wow your website visitors. Advanced animations, parallax effects, and interactive features.
Duplicator ProThis plugin will save you from disaster. It keeps regular backups of your WordPress sites. In case you break your site you can easily recover it. Using this plugin you can also easily migrate your WordPress sites. It can also keep cloud backups such as Dropbox, Google Drive, One Drive, etc.
ThemeforestBuy any type of beautiful WordPress theme from here such as blogging, WooCommerce, Real Estate, etc. Ability to import any demo site. Chose any type of page builder such as Elementor, WP Bakery, Muffin builder, etc.
𝗘𝗻𝘃𝗶𝗿𝗮 𝗚𝗮𝗹𝗹𝗲𝗿𝘆Best WordPress image and video gallery plugin. Easy to use with powerful and advanced features. If your WordPress page builder does not have a good enough gallery element then check this one out!
– Completely responsive on mobile
– Social Media Integration
– Slideshow & Fullscreen
– Drag & Drop Builder
Ithemes Security ProIt is a powerful WordPress security plugin. It will protect your website from bots trying to hack into your site through a brute force attack. It can also scan your website and remove malware.
Getty ImagesGet premium stock images from here. Using high-quality and premium stock images on your site will make your site look professional. Visitors will be impressed and quickly turn into paying customers.
WP FormsOne of the most popular WordPress form plugins ever. Easily build advanced contact, payment, donation, survey, and newsletter forms with zero coding. Embed your forms on posts/pages using a shortcode. Built-in Recaptcha to prevent spam. The information of people submitting the form will be stored as leads directly on the website.
NamecheapBuy any type of domain name at a very low price. The renewal rates are also reasonable. I use namecheap domain names on all of my websites.

India $1295