Are you looking to customize the appearance of your Divi buttons without affecting their text? Divi’s built-in Button module and button element inside other modules don’t offer a direct option for independent size adjustment. But still, CSS provides a flexible and powerful solution to achieve this customization.
This article will show you how to customize the button’s size independently from its text. Adding custom CSS code to your Divi lets you precisely control the padding, effectively determining the button’s overall size without affecting the text. This approach gives you granular control over the button’s appearance, allowing you to create buttons that perfectly match your overall design.
How to Customize the Size of the Divi Button Independently from its Text
1. Add the Divi Button
Go to the Divi Visual Builder and click the “+” sign to add a new module. You can add the Button module or any module that includes the button element, such as Call To Action, Email Optin, etc. For this example, we add the Call To Action module.
To customize the module’s title, button text, button link, and other settings using the Divi Builder interface, simply click on the module settings to open its settings panel.
From here, you can make changes to the module’s appearance and functionality. For example, you can change the title of the module, the text that appears on the button, the link that the button takes users to, and the color and style of the button.
2. Identify the Button Element CSS Class
Once you add the button element to your page, you need to pinpoint its specific CSS class before customizing the button element. The class name of the button element depends on the module you use. So, how do you get the CSS class name of each button element on your page?
First, preview your page by clicking the Exit Visual Builder button. Next, you can use the built-in Developer Tools of your web browser (nearly all web browsers have this feature). If you use Google Chrome, you can click the menu icon (three-dot icon) and select More Tools -> Developer Tools.
Once you’ve entered the Developers Tools window, click the arrow icon to inspect the button element on your page (see the image below).
Next, point the cursor to the button element to determine its CSS class.
As you can see from the image above, we’ve identified the CSS classes of our button element in the Call To Action module as “.et_pb_button.et_pb_promo_button“.
3. Adding the Custom CSS
Once you’ve identified the CSS class of your button element, it’s time to add the CSS snippet to the module. In the module settings, navigate to the Advanced tab -> Custom CSS -> Free-Form CSS.
Here is an example of a CSS snippet that you can apply to customize the size of the Divi button independently from its text:
.et_pb_button.et_pb_promo_button {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 70px;
padding-right: 70px;
}
.et_pb_button.et_pb_promo_button:hover {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 70px;
padding-right: 70px;
}
Once you add the CSS snippet to the module, save your page and preview it by clicking the Exit Visual Builder button.
What did the CSS code do?
The CSS snippet targets the button element in the Call To Action module with both the .et_pb_button and .et_pb_promo_button classes. Here’s a breakdown:
.et_pb_button.et_pb_promo_button:- Sets the padding for the button on all sides:
- Top and bottom padding: 15px
- Left and right padding: 70px
- This gives the button some vertical space and substantial horizontal space.
- Sets the padding for the button on all sides:
.et_pb_button.et_pb_promo_button:hover(hover rule):- It defines the same padding as the default/normal state.
- The hover state usually changes styles to give visual feedback when the user hovers over the button, but here it doesn’t change any properties. This means the button will look the same whether or not the user is hovering.
Feel free to replace the property values in the CSS snippet to achieve the best appearance of your button.
The Bottom Line
This article shows how easily you can customize your Divi button independently from its text. Customizing the Divi button’s size independently from its text allows for greater design flexibility and control over the visual impact of your buttons.
Using custom CSS, you can tailor the button dimensions without affecting the text size, enhancing the user experience and achieving a more cohesive design. Implementing this technique helps you maintain brand consistency while optimizing button usability across your Divi-powered website.
