Divi Builder comes with a Button module, allowing you to add a button element on the page you are working on. If you are new to Divi Builder, working with the Button module might is a bit confusing. In this post, we will show you how to customize a button in Divi Builder.
The customization options offered by the Button module are basically rich enough. You can, for instance, add a gradient background to your button without special tricks. The same option (at the time of writing), is not offered by Elementor. In Elementor, you need a little trick to create a gradient button.
Customizing a button in Divi Builder
To get started, add a Button module by clicking the grey plus icon inside a row.
The settings panel will appear once you clicked the Button module. Before making further customization, replace the default text of the button on the Button field under the Content tab.
To add a link to your button, you can open the Link option and paste your link here.
To really customize your button, go to the Design tab. Open the Button option and enable the Use Custom Styles For Button option by sliding the button.
As you can see, there are more customization options you can set once you activated the Use Custom Styles For Button option. To set the button text size, you can simply slide the selector rightward to increase the size and leftward to decrease the size. Or you can simply type the exact size on the available field. To set the button text color, simply select the color you want on the Button Text Color section.
To set the background color of the button, you can scroll a bit further down to the Button Background section. There are three background types you can select: solid, gradient, and image. Simply select your choice and set the background.
Scroll a bit further down to set the border size, border color, and border radius. You can set the border size on the Button Border Width section, border color on the Button Border Color section, and border radius (in case you want to create rounded corners) on the Button Border Radius section.
To change the font of the button text, you can scroll down to the Button Font section. Below this section, there are also options to set the font weight as well as the font style.
When adding a new button with the Button module in Divi Builder, your button will have an arrow icon by default, which will appear when you hover your mouse over the button. You can change this default icon by selecting your preferred icon on the Button Icon section. If you don’t use an icon on your button, you can disable the Show Button Icon option.
To change the color of the icon, you can scroll down to the Button Icon Color section. Select the color you want. Below this section, there is an also option to set the icon placement as well as an option whether you want to show the icon only on hover.
Set the custom size
To set the custom size for your button, you can leave the Button option and make a switch to the Spacing option, still under the Design tab. You can set the custom size by setting the padding.
Those are the basic customizations you can set on a button in Divi Builder. There several other customization options you can set to. You can play around on the Design tab on the settings panel to set other customization options. Don’t forget to click the checklist icon before you close the settings panel to apply the customizations you have set.
The bottom line
The Button module allows you to add a beautiful button when working with Divi Builder. Whether you are creating a page, creating a custom footer, or creating a custom header. There are a bunch of customization options offered by this module, like adding a gradient background or adding an icon to the button. There are also some missed customization options, though. For instance, there is no option to set the hover background color.
