Although Divi has added a simple fullwidth button slider option on contact forms at the time of me writing this guide, the button module itself does not come with a simple fullwidth option like this. Luckily, doing this for a basic button module is a simple fix using CSS. This quick and easy tutorial will help you create your full-width button in Divi. Let’s get started!

This article includes affiliate links, which means Desert Rose receives a small commission for purchases made using those links at no additional cost to you.

Steps for Creating a Full-width Button in Divi

Step 1. Assign a button width class to your button module.

After you are done creating your button using the Button Module, go to the module’s “Advanced” tab. You can call your class whatever you want. However, I suggest the class name be informative of what the class does and to what it does it to. So for example, I chose “fullwidth-IG-button” as my class name since it tells me 1) I am making my element fullwidth, and 2) the element type I am doing this with is my Instagram page button. Feel free to name yours in a way that makes the most sense to you and whoever else may be working with your site!

Step 2. Go to Divi Theme Options

On your main WordPress Dashboard, find Divi on the menu to the left side. Underneath that, find “Theme Options”. Click that.

Step 3. Add Your CSS to the “Custom CSS” section of Theme Options.

Scroll all the way down to the bottom of Theme Options until you see “Custom CSS” and add your CSS code. As a side note, I like to preface my CSS with comments as a reminder to myself of what that specific code does. The /* */ symbols are used to indicate these comments. As a reminder, the class name .fullwidth-IG-button is what I chose for my specific purposes. But that class name can be whatever you decide it is. As long as it matches what you assigned your module, then you are good to go! Once you have finished entering the code, MAKE SURE YOU PUSH THE SAVE CHANGES BUTTON!

/* Fullwidth IG buttons on IG link page */
.fullwidth-IG-button {
	width: 100%;
	flex-direction: column;
	gap: 1em;
	padding-left: 3%;
	margin-top: 0px;
}

Step 4. Admire your new full-width buttons in Divi!

Refresh your page, and you should see your new full-width button.

Other CSS that Works and More

You can also use the following code to achieve the same effect:

width: 100%;
display: block;
text-align: center;

Also, you can now go to the Advanced tab of the button module and add the CSS directly in the “Main Element” box under Custom CSS instead of having to go to Divi “Theme Options”.

Bonus Tip: Add Padding for Better Appearance

To enhance the visual appeal of your full-width button, add padding to the button text. Under the Design tab in the Button Module settings, adjust the Padding values to make the button more prominent and clickable.

Final Thoughts on Creating a Full-width button in Divi

Creating full-width buttons in the Divi Theme Builder can be achieved by using just a little bit of CSS. By following these steps, you can design eye-catching buttons that improve user interaction and elevate your website’s functionality. Experiment with styles and effects to make your buttons align with your brand identity and enhance your visitors’ experience.

If you are a small business owner and want additional help with designing or customizing your website, feel free to reach out to Desert Rose Design & Photo Co. via the contact form!