Search

How to Customize a Button in Divi

Divi Builder, the editor of the Divi theme, 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.

Customizing a Button in Divi Builder

To get started, add a Button module by clicking the grey plus icon inside a row.

Adding a Button module in the Divi Builder editor.

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.

Replacing the default button on from the Content tab on the settings panel.

To add a link to your button, you can open the Link option and paste your link here.

Adding a link to the button.

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.

Further style up the Button module on the Design tab.

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.

Setting the text size of the button.

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.

Changing the background color of the button.

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.

Setting the border of the button. From width, color, to radius.

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.

Changing the font family of the button.

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.

Adding an icon to the button module.

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.

Changing the color of the button icon.

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.

Setting a customize button size.

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.