Making Divi Buttons the Same Size

Written by Dan Mossop

Normally the Call-to-Action (CTA) buttons in the Divi Theme adjust in size to fit the text they contain. If you'd prefer to have a standard button width throughout your site, here's how to do it.

Normally the Call-to-Action (CTA) buttons in the Divi Theme adjust in size to fit the text they contain. If you'd prefer to have a standard button width throughout your site, here's how to do it.
Normally the Call-to-Action (CTA) buttons in the Divi Theme adjust in size to fit the text they contain. If you'd prefer to have a standard button width throughout your site, here's how to do it.

Setting the Minimum Button Width using CSS

To have a standard button width throughout your site, you can use the following CSS:

.et_pb_button { 
	min-width: 180px; 
	text-align:center; 
}
Should you wish to apply it only to certain Divi Builder modules, you can give the module a CSS class (in the module settings). Then you can set the CSS as follows:
.your-css-class .et_pb_button { 
	min-width: 180px; 
	text-align:center; 
}
Just replace your-css-class with the CSS class you specify in the module settings.

This tip actually works by setting a minimum size on the buttons, so that if you do have any buttons longer than the standard width, they'll still display correctly.

I'd also suggest setting the min-width to at most 180px otherwise slider buttons may start to display poorly on mobiles.

Setting the Minimum Button Width using Divi Booster

The option to set a minimum width on CTA buttons is available in Divi Booster from version 2.0.7 onwards. You can find the option at:

Divi > Divi Booster > Divi Builder > General > Set minimum CTA button width

 

Standardize Your Divi Button Sizes Easily

Tired of inconsistent button sizes on your Divi site? With Divi Booster, you can easily set a standard button width for all your CTAs starting from version 2.0.7. Ensure uniformity and professionalism across your site by customizing your button dimensions effortlessly.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

17 Comments

  1. Hi, I'm trying to add:

    .your-css-class .et_pb_button { min-width: 180px; text-align:center; }

    to the button's CSS, but whatever I do, nothing seems to happen.

    I replaced the your-css-class with my own class, and tried to create this class too, but I must be doing something wrong.

    Can you give more specific advice about where to put the code?

    Reply
    • Hi Rob, the code should be added to either the site CSS (e.g. in the "Divi > Theme Options > General > Custom CSS" box), or to the page-specific CSS (accessible via the Divi Builder settings menu for the page). It won't work in the CSS boxes within the module's advanced tab. These boxes don't really accept full CSS, only the CSS properties for a particular element (i.e. just the "min-width: 180px; text-align:center;" in this case).

      I hope that helps / makes sense, but if you're still having problems, can you point me to the buttons you're working on so that I can take a look? Thanks!

      Reply
  2. Another great tip from Dan-the-man. Ok I'm sold…. I'm becoming one of your affiliates!

    Reply
  3. I don't know where I'm going wrong.
    I tried it as an ID and changed . to # and I tried it as a class, but it won't work for me.
    Any hints?

    Reply
    • Hi Rebecca, you've added the code correctly. However, the min-width needs to be increased as your buttons are wider than the 180px min-width used in my example (and thus that min-width doesn't have any effect). The wider of the two buttons is around 236px wide, so to make the other button the same size we need to set the min-width to 236px. As I mention in the post, though, a min-width greater than 180px can look odd on mobiles. To avoid this, we can prevent it from being applied on mobiles. This gives the final code:

      @media only screen and (min-width: 981px) {
          #buttonsamesize .et_pb_button {
              min-width: 236px;
              text-align: center;
          }
      } 
      

      Hopefully that works better for you.

      Reply
      • I tried using the above code and it removes all inherited styling that is applied to the desktop view.

        Reply
        • Hi Ryan, were you able to solve this? It looks like you having working now on your linked contact page. At a guess I'd suspect the final "}" was missing but that you've already figured that out..? :) Let me know if you're still having trouble with it. Cheers!

          Reply
  4. While I am able to create a standard width for Divi Buttons, I cannot find a code to standardize the height.

    Can you help

    Reply
    • Hi Victor,

      I think the best way to do this is using the top and bottom padding on the buttons.

      If you're using the button module, you can use the "Custom Padding" option in the design tab of the module's settings.

      For buttons on things such as a slider, you should usually be able to set the padding by adding the following into the Custom CSS box for the button:

      padding-top: 30px !important; padding-bottom: 30px !important;
      

      You could then make your modules global to allow to reuse / standardize them.

      Alternatively, you can use this CSS to affect all buttons:

      .et_pb_button, .et_pb_button:hover { 
      	padding-top: 30px !important; 
      	padding-bottom: 30px !important; 
      }
      

      Hope that helps!

      Reply
  5. So very new to everything. I am trying to understand how Divi applies the CSS. Selector, property and value. Can I and How would I put this right into the button module

    Reply
    • Hi Mike, in the advanced / custom CSS tab of the button module, or any module, the boxes are for properties and values only. Divi will then wrap these in the selector for that particular element. So, in this example, you'd enter "min-width:180px; text-align:center;" into the "Main Element" box of the button module's advanced / custom CSS tab. Divi will then take care of adding the right selector to target that particular button.

      Reply
  6. If it's an id, shouldn't it use a # instead of .?

    Reply
    • Hi Colten, yes you're right, it should be. I've updated the post, but have opted to consistently refer to adding a class (in which case the "." is appropriate), since for something like button styling it probably makes sense to use a class as it allows you to apply the style to multiple buttons (or just one, if you so choose). Thanks!

      Reply
      • Thanks for the clarification. I'm still learning CSS so I wanted to make sure I wasn't just confusing myself here. I appreciate all the work you've done with Divi Booster and the community!

        Reply
        • You're welcome, Colten :)

          Reply
  7. Thanks Dan. This works perfectly!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Random Divi Posts