More in this series.

We are kicking this tutorial series on how to make your Divi sites not look like Divi sites off by fixing those pesky Divi Button styles. The smart folks at Elegant Themes have given us two ways to go on and be all bespoke which are Global Button Styles that you can set in the Theme Customizer, then also Divi Global Presets.

Both of these vary in scope, but you will learn how to use each of them and will be on your way to building less distinctly Divi sites in no time. Not only that, they will make building your Divi Sites a lot more efficient because you are not going and setting styles individually for every single button on your site.

Smart!

PREVIEW:

After

Video Tutorial

How to Create a Global Divi Button Style in the Theme Customizer

Ok, the first way we will give our shaggy buttons a trim, is to head over to the Theme Customizer to set up some global styles for our Divi Button states.

Setting Divi Button styles here will change all Divi Buttons that have default button styling applied to the style you define here. Changing these styles will not affect buttons that are using their own custom buttons styles. You know the setting when you scroll down on the design tab of a module to the Button styles, then flip the switch that says “Use Custom Styles for Button” to YES.

Theme Customizer Button Style Settings

Button Styles (Not Hovered)

Theme Customizer > Buttons > Buttons Style

You can assign any button styles you want here, just know that these styles will be applied GLOBALLY to all buttons if they are set to default.

Button Style Settings

Text Color: White
Background Color: #0fe5a8 (Make sure to slide the opacity up to 100%)
Border Radius: 5px
Select Icon: Pick one you like
Button Font Style: Bold
Button Font: Poppins

Button Styles (Hovered)

Theme Customizer > Buttons > Buttons Hover Style

You can assign any button styles you want here, just know that these styles will be applied GLOBALLY to all buttons if they are set to default.

Button Style Settings

Background Color: rgba(15,229,168,0.5)
Border Radius: 5px
Letter Spacing: 2px

Publish

As you were making these changes, you probably notices that they were taking effect immediately to the right of your screen, this is great for finding the perfect combinations that suit your site. When we get to the next step here, you will see why what we did is so helpful because we essentially set the starting point for defining some Divi Button Global Presets for all of the buttons on our site.

Let’s take a look.

How to Create Button Presets using Divi Global Presets

Divi Global Presets offer a little more localized and specific styling to any element or module in Divi. When you save or use a Divi Global Preset, it will apply that style to the entire module where it is being used. This is super useful because now you can use the base button style that you defined in the previous method, and refine styles for different situations.

Let’s say you want a specific look for your product-related buttons, but a different one for post-related buttons, you can create those Divi Global Presets. This saves you time and helps you standardize your development flow.

Let’s take a look at adding a Divi Global Preset for a Divi Button Module by opening a page that has a button module on there, or just creating a new page and adding a button module.

Add a Divi Button Module

You’ll notice immediately that your new button immediately has the style applied that you defined in the Theme Customizer which gives you a good starting point. Next we want to open the button settings and then the Divi Global Preset setting to edit the default preset style.

Divi Button Module Settings > Preset: Default > Edit Preset Styles

You will see that this reveals something that looks a bit familiar, except that the module settings area now turned grey. This means that you are now editing a Divi Global Preset. You can now click on the Design Tab to customize the default preset for your Divi Button Modules.

Divi Button Default Global Preset Settings

You can assign any button styles you want here, just know that these styles will be applied to all Divi Button Modules that are set to default preset.

Design Tab

Button

Use Custom Styles for Button: YES
Button Background: 2-Color Gradient #2b87da and #0fe5a8
Gradient Direction: 25deg
Button Font Weight: Ultra Bold
Button Icon: Pick one you like

Box Shadow

Box Shadow: Option 3

Save

Your new Default Divi Global Preset for Button Modules will now look something like this. Try it! Add another button to the page. You will see that it now looks exactly like the other button.

We’ll wrap this up by creating one additional Divi Global Preset for the Divi Button Module.

Open Divi Button Module Settings > Divi Button Module Settings > Preset: Default > Create New Preset From Current Styles

Divi Button Global Preset Settings

Preset Name: Button Upgrade (or whatever you want, really)

Design Tab

Button

Use Custom Styles for Button: YES
Button Background: Delete the Gradient and set color to solid #5430ce
Button Font Weight: Regular
Button Font Style: To Uppercase
Button Text Shadow: Option 5
Button Text Shadow Color: #0fe5a8

Spacing

Padding Top/Bottom: 0px

Box Shadow

Box Shadow: Option 4

Save

When you are done, your Divi Button Module should look something like this bad boy up top. Give the preset a spin by adding another button module on this page, and then setting the preset to the Button Upgrade preset you just created.

As if by magic, your button will be transformed into this new style. Hello, efficiency!

We all know what happens to Agent Smith…