Designing a Divi Button is a fun part but it’s as well an important part when you’re thinking of increasing CTAs across your site. There are a lot of ways to design Divi Theme global button with just adding some customizations done in module option and some CSS snippets.

In this tutorial you would learn how to design and decorate Divi Buttons with most effective ways and anybody can do this with Divi Theme.

Note: This tutorial is first appeared on Elegant Themes official blog and we just picked some parts of it and shared on this blog. You can view the original post here.

Divi Default Button Module

Before we get started, let’s take a look at what the Divi Button Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.

Divi Button Default Look

Divi Button Default Look

Divi Button Default Hover

Divi Button Default Hover

This is pretty good looking button in Divi Theme but we want our buttons more catchy and appealing when it comes to the matter of Call to action.

So here we will show you how you can design and decorate Divi Theme default button in 5 different and stylish ways.

Let’s begin..

The 3 areas we’ll be customizing in the testimonial module are:

  1. General Settings
  2. Advanced Design Settings
  3. Custom CSS

blog-button-settings

So, now that we’re set up and ready – let’s dive into it!

1. Wide Button – Inverse Hover

blog-button-1

Example 1

blog-button-1-hover

Example 1 – Hover Over Effect

With just a few adjustments and color changes, you can easily bring this style to life and match it to the color scheme of your website.

To create this look, I did the following:

General Settings:

  • Button Text: Let’s Do This!
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 20
  • Button Text Color: #ffffff
  • Button Background Color: #ff9b1f
  • Button Border Width: 1
  • Button Border Radius: 10
  • Button Font: Monterrat
  • Changed Button Icon to the double right arrow

Now the hover over settings:

  • Button Icon Color: #ff9b1f
  • Button Hover Text Color: #ff9b1f
  • Button Hover Background Color: #ffffff
  • Button Hover Border Color: #ff9b1f

Custom CSS:

Main Element

width: 80%;

Here’s what the settings look like:

blog-button-1-styles

2. Engaging Image Over Button

Example 2

Example 2

Example 2 – Hover Over Effect

Example 2 – Hover Over Effect

The goal of this example is to utilize an “action image” to help encourage the website user to click the button below the image. This method can be VERY useful for newsletter sign ups and more. It really gives a personalized feel to a site rather than just a bare sign up button.

Here’s what the backend will look like:

Example 2 Backend

Example 2 Backend

Added the image module, uploaded my image, selected “no animation” on the image and center aligned it.

In the button module settings, I changed the following:

General Settings:

  • Button Text: Message Me
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 20
  • Button Text Color: #454853
  • Button Background Color: #ffffff
  • Button Border Width: 1
  • Button Border Radius: 0
  • Button Font: Comfortaa (bold and uppercased)
  • Changed Button Icon to the envelope icon

Now the hover over settings:

  • Button Icon Color: #dedfe0
  • Button Icon Placement: Left
  • Butto Hover Text Color: #dedfe0
  • Button Hover Background Color: #454853
  • Button Hover Border Color: #dedfe0

Here’s what the Advanced Design Settings look like:

blog-button-2-styles-1

3. Double Button – Left & Right

Example 3 Left & Right Buttons

Example 3 Left & Right Buttons

Here’s what the hover over effects will look like:

Example 3 Left – Hover Over Effect

Example 3 Left – Hover Over Effect

Example 3 Right – Hover Over Effect

Example 3 Right – Hover Over Effect

Added a 2 column row and added the button module to each section.

Example 3 Module Backend

Example 3 Module Backend

General Settings:

  • Button Text: I’m Ready To Buy!
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 24
  • Button Text Color: #ffffff
  • Button Background Color: #5eb71f
  • Button Border Width: 0
  • Button Border Radius: 0
  • Button Font: Arvo
  • Changed Button Icon to the envelope icon

Now the hover over settings:

  • Butto Hover Text Color: #5eb71f
  • Button Hover Background Color: #ffffff
  • Button Hover Border Radius: 0

Custom CSS:

Main Element – (This is where I’ve adjusted the width of the button, the angled shape and the radius on the left.)

width: 100%;
-webkit-clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%);
margin-right: -125px;
border-radius: 25px 0px 0px 25px;

In the right button module settings, we changed the following:

General Settings:

  • Button Text: I Have Some Questions.
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 24
  • Button Text Color: #ffffff
  • Button Background Color: #c64031
  • Button Border Width: 0
  • Button Border Radius: 0
  • Button Font: Arvo
  • Changed Button Icon to the envelope icon

Now the hover over settings:

  • Butto Hover Text Color: #c64031
  • Button Hover Background Color: #ffffff
  • Button Hover Border Radius: 0

Custom CSS:

Main Element – (This is where I’ve adjusted the width of the button, the angled shape and the radius on the right.)

width: 100%;
-webkit-clip-path: polygon(14% 0, 100% 0%, 100% 100%, 0 100%);
clip-path: polygon(14% 0, 100% 0%, 100% 100%, 0 100%);
margin-left: -125px;
border-radius: 0px 25px 25px 0px;

Here’s a great resource for creating shapes with CSS: http://bennettfeely.com/clippy

One thing to note: This will take some extra work to align nicely on tablets and phones so for this example, I’ve disabled the Phone and Tablet views on the Row Module Settings.

Disable Section for Mobile/Tablet

Disable Section for Mobile/Tablet

4. Background Image in Button

Example 4

Example 4

Example 4 – Hover Over Effect

Example 4 – Hover Over Effect

With web design moving away from image graphics and more into flat design and CSS based call-to-actions, this method must be used wisely, but every once in a while, it’s fun to use a background image to give some life to a button!

General Settings:

  • Button Text: Start Your Trip!
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 30
  • Button Text Color: #e8f4f1
  • Button Border Width: 2
  • Button Border Color: #029a9c
  • Button Border Radius: 50
  • Button Font: Chewy

Now the hover over settings

  • Butto Hover Text Color: #ffffff
  • Button Hover Background Color: #029a9c
  • Button Hover Border Color: #ffffff

To Add the background image, go to your wordpress dashboard and go to Media > Add New and upload the background image. Once the images is uploaded, click it and copy the URL path like it’s shown below.

In this case, we copied “/wp-content/uploads/2016/08/button-4-bg.jpg”

Background image URL path

Background image URL path

Custom CSS:

background: url('https://cdn.elegantthemes.com/blog/wp-content/uploads/2016/08/button-4-bg.jpg') top center no-repeat;
width: 350px;
padding: 20px;

And there you have it! Now you know how to put an image in the background of a button! Divi’s basic hover over function also give this a very cool effect for the user.

5. Button Integrated with Background Image

Example 5

Example 5

Example 5 – Hover Over Effect

Example 5 – Hover Over Effect

To create this look, I did the following:

Added the background image to the Section Module Settings and added 200px padding to the top and bottom to give the button some room.

Example 5 Section Module Backend

Example 5 Section Module Backend

Example 5 Section Module Padding

Example 5 Section Module Padding

General Settings:

  • Button Text: Work With Us
  • Button alignment: Center

Advanced Design Settings:

  • Turn on “Use Custom Styles for Button:”
  • Button Text Size: 20
  • Button Text Color: #e2e3c5
  • Button Background Color: rgba(52,77,74,0.94)
  • Button Border Width: 1
  • Button Border Color: #e2e3c5
  • Button Border Radius: 0
  • Button Font: Oswald (uppercase)

Now the hover over settings:

  • Butto Hover Text Color: #344d4a
  • Button Hover Background Color: #e2e3c5
  • Button Hover Border Color: #344d4a

Custom CSS:

width: 300px;
box-shadow: 2px 1px 18px #284242;

Now you have a button that blends in nicely and seamlessly with a background image! This can really add a unique dynamic to your site when you want to draw your website users to a specific call-to-action.

Summary

We hope this tutorial has helped you to understand how effectively you can design and decorate your Divi Theme buttons that can drive the most click through rates than other modules in your Divi Theme.

Note: This tutorial is first appeared on Elegant Themes official blog and we just picked some parts of it and shared on this blog. You can view the original post here.

Pin It on Pinterest

Share This