This post offers some ways of controlling the width of buttons added to your site using the Divi Builder button module.
Adjust the Button Module Size using the Padding Option
Perhaps the easiest way to change the button module size is using the button module's size is using the padding option, found at:
Button Settings > Design > Spacing > Padding
It lets you add extra space above, below, and to the sides of the button module's text, inside the button border. The result is that the button size is increased.
It's a quick, easy approach. However, its downside is that the total width / height of the button is determined by the padding plus the width / height of the button text. As such, two buttons with the same padding but different text may end up as different widths. Similarly, if your layout requires a fixed button width (400px, say), it will take some trial and error to find the right padding, and any changes to the button text or font styles would require a re-adjustment to the padding.
Set the Button Module Size using Custom CSS
A more accurate way to set the size of your button module buttons is using the custom CSS options Divi provides in the module settings. This can be used to set the minimum width / height on the buttons individually. You can do this by going to the:
Button Settings > Advanced > Custom CSS
option of each button module and pasting the following into the "Main Element" box:
min-width: 400px; min-height: 200px;
This will make the buttons at least 400px wide and 200px tall. Obviously, you can change this to your desired width, and omit either the width or height setting if not required.
Setting a Site-Wide Minimum Button Width
Divi Booster contains an option for setting the minimum width on buttons within Divi. You'll find it at:
Divi > Divi Booster > Divi Builder > Standard Builder > Set minimum CTA button width
It sets a minimum width for all buttons on the site, so it's definitely worth considering the impact on all other buttons on your site – these would also be increased in size if smaller than the minimum width set in the option. Note that this option affects not just the button module, but other modules which display buttons such as the CTA and slider modules.
How to set button width and height?
Hi Douglas, I've just updated the post to include details on setting the height, and additional details on setting the width via padding. Hope it helps!
This is a super tip!!!
Thank you. Very helpful