5 Unique Button Styles You Can Achieve With Divi’s Button Module

Posted on August 20, 2016 by in Divi Resources | 75 comments

5 Unique Button Styles You Can Achieve With Divi’s Button Module

Welcome to Day 82 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


In this post, we’re going to look at Divi’s Button Module and show you how to style it in five unique ways. The button module is one of the most popular of all the Divi modules because it’s so versatile and useful for getting site visitors to help you achieve your objective in a given post, page, or section. Therefore, it’s very important that we as designers and developers make these buttons appealing and eye catching.

Let’s dig in and find out what’s possible with Divi’s Button Module!

The 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

The button module out of the box will be left aligned and set to whatever the theme color is. It’ll have a basic hover over state shown below.

Divi Button Default Look Hover Over Effect

Divi Button Default Look – Hover Over Effect

This is a good starting place, but we want our buttons to be as eye catching as possible. Not obnoxious, but vibrant and attention grabbing. We’re going to focus on five different styles without getting too involved with custom code or CSS. There are a few things I’d like to point out before we get into it:

  • With all of these examples, we’ll show you the button’s normal state AND hover over state. It’s best practice to style your buttons with a nice hover over effect.
  • One way to give a nice human element to your site is to steer away from robotic words like “submit” or “contact” as we want our buttons to be as inviting as possible.
  • We’re going to use “#” for the button URL which will give the button a link but keep it on the page but normally you’ll put your link in there. You will of course want to put an actual link in the url field when creating buttons for use on a live site.

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

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

Button Module Settings

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

1. Wide Button – Inverse Hover

Example 1

Example 1

Example 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. For this example, I’m using a vibrant but not “annoying” orange that’ll grab the eye of the user and encourage them to click. I’ve also increased the width of the button, centered it and put a nice hover over inverse effect on it.

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:

Example 1 Advanced Design Settings

Example 1 Advanced Design Settings

You can see here that with most of the customizations in the Advanced Design Settings and just one line of CSS, you can easily take the Divi Button module to a whole new level with barley any code!

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. I styled this button with colors from my image above to tie it all in together, but you can style this to work nicely with whatever image you choose.

Here’s what the backend will look like:

Example 2 Backend

Example 2 Backend

To create this look, I did the following:

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

Example 2 Advanced Design Settings

And that’s it! Pretty easy and unique way to drive some attention to a specific call-to-action. Again the goal here was to utilize an image along with the button to capture the attention of the website user and give it a friendly touch.

3. Double Button – Left & Right

Example 3 Left & Right

Example 3 Left & Right Buttons

Many times you’ll run into a situation where a website user will need to choose more than one option. In this example, I’m mocking up a situation where the user can either buy a product or get more information. You can easily do this by just stacking one button on top of another, but adding buttons on the left and right and blending them together makes it a littler more appealing. I’m also using some color psychology here as well. Green colors typically mean “Go” and Red colors typically mean “Stop” or give off a feeling of caution so we’re going to use a green button on the left saying “I’m Ready To Buy!” and a red button on the right button stating “I Have Some Questions.”

This is also a great way to capture a potential customers information even if they don’t buy your product immediately. If a user doesn’t want to buy right away, you want to make them feel invited to ask some questions or get more information. Otherwise, they may just bounce off the site and you’ve lost a great opportunity to capture the information of a potential client or customer.

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

To create this look, I did the following:

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

Example 3 Backend View

Example 3 Module Backend

In the left button module settings, I changed the following:

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, I 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

As you can see here, with just a handful of adjustments to the Advanced Design Settings and a few lines of CSS, you can create a really cool look with 2 buttons side by side! You’ll impress some clients with this one 😉

4. Background Image in Button

Example 4

Example 4

Button 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! I’ve mocked up a situation here where we’re going to encourage the website user to take the next step in booking a trip to the ocean. I’ve used a background image of ocean water to give this button some life and a flat color hover over effect.

To create this look, I did the following:

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 my case, I copied “/wp-content/uploads/2016/08/button-4-bg.jpg”

blog-button-4-bg

Background image URL path

Now go back into the button module and into the Custom CSS. Here you’ll use the CSS below with the image URL path you copied. I’ve also changed the width of the button and added some extra padding to give it some space.

Custom CSS:

background: url('/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

In this last example, we’re going to make our call-to-action button blend seamlessly into the background image by adjusting the colors and adding a few effects. This is a great way to separate a CTA button or contact section of your website.

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

Then in the Button Module Settings,

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

Finally, in the Custom CSS panel, I’m going to add a shadow to make this pop out from the image and widen the button width.

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.

Wrapping Up

I hope these examples have inspired you to have some fun with the Divi Button Module! A call-to-action is one of the most important aspects of a website’s design so it’s very important that we, as creatives, have a variety of ideas in our tool box to create some unique button options. Feel free to use these ideas and the Divi Button Module to come up with some amazing button styles!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail background image by ByEmo / shutterstock.com.

divi-2-6-logo

Divi 100 Day 82

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


75 Comments

  1. Randy A. Brown

    Thanks Josh. The double button and background image button are especially interesting.

    • Josh Hall

      Great to hear Randy! Yea staying creative with button styles can be a challenge. Thanks for the feedback!

  2. I’ve seen circle buttons used on a couple of divi sites. Any idea on how to create a perfect, larger circle?

    • That will take a lot of CSS:

      .et_pb_button_0 {
      padding-top: 39px;
      width: 120px;
      height: 120px;
      background: red;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 100px;
      }

      .et_pb_button:hover {
      padding: none;
      border: 2px solid transparent;
      }

      This should help

      • Thanks!

    • Josh Hall

      Hey Joe,

      In the Button Module Custom CSS > Main Element area, you can try something like this:

      height: 150px; width: 150px; padding-top: 56px; padding-left: 36px; border-radius: 100%;

      You may have to adjust the padding depending on the button text and you can always adjust the width, height and other settings. Let me know if that helps!

  3. WOWWW! That’s a fantastic tutorial!

    • Josh Hall

      Thanks, Alberto! Hope these examples give you some good ideas to build off of.

  4. Somehow you guys reduced one day in the countdown, that will add some pressure to you, but I’m happy I’ll get Divi 3.0 one day earlier 🙂

  5. Goodies…Never thought about “button 4” Thanks Josh

    • Josh Hall

      Great to hear! Yea it’s easy to get comfortable with the same styles but I’m working ever harder to find new creative ideas.

  6. Beautiful tutorial! Done

  7. I love these lessons. I learn so much from them. Thanks.

    • Josh Hall

      Great to hear, Donna! Hope these help you come up with some cool unique styles!

  8. Thank you so much for these awesome button styles, most excellent indeed.

    I really love the two buttons together, and it works great except for two small issues.

    First, you may need to add “!Important” to the radius of each button or the default 0 radius overrides this setting.

    The second issue, at least for me was a slight gap between the buttons, which actually looks okay, but if you want them to blend together you may need to change the left and right margins from -125px. I set mine to -130px and it worked perfectly, though I think -126px or -127px may have worked.

    • Josh Hall

      Thanks for the feedback, James! Yea you’re right – the double button idea may take some more tweaking depending on your browser width, etc. Hope this was a good starting point for you at least!

  9. Love the tutorial, unfortunately, it’s already outdated. Current versions of IE & FF do not support that code.

    • Josh Hall

      Hey Dina! Which example isn’t working on FF or IE? I know some may require a “-moz-“ or -“webkit-“ extension before the CSS element. We try to keep these tutorials fairly basic without getting involved with too much CSS. But to your point, we do want to make sure they look as good as possible between all browsers 🙂

  10. Great tutorial! This gives me a good source of inspiration for taking my button design to the next level. Thanks, Josh! 🙂

    • Josh Hall

      Awesome to hear, Ryan! That’s the goal with these tutorials. Looking forward to seeing what you come up with!

  11. I think you put the wrong blog post image on this one, shouldn’t it be day 82?

    • Yep, our bad! I updated the post. I guess we are a little too excited to get to day 100 🙂

  12. I love love love these! Thanks! They are even better than I expected when I clicked on the link after reading the title.

    • Josh Hall

      Great other, Beelissa! Thanks for the feedback.

  13. Looks like the css codes with % is not working in FF, is there an easy solution for this?

    • Josh Hall

      Hey Martin, you may need to add “-moz-“ and “-webkit-” to certain CSS elements.

      Example:

      border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;

      Let me know if that helps!

  14. Hi, thanks for this great ressource, however I think this posting should be day 82, am I wrong?

    • Josh Hall

      You’re right, Johannes – should be fixed now!

  15. Thanks for this tutorial. I didn’t know I could do half of these things with Divi buttons.

    • Josh Hall

      Great to hear, David! Yep with Divi & some CSS…anything’s possible 🙂

    • Josh Hall

      Thanks for the feedback, John!

  16. These are great. Example 3 is my favorite and I’ll be putting it to use very soon.

    Thank you.

    • Josh Hall

      Great to hear, Eugene!

  17. Nice job… really interesting and useful tutorial

    • Josh Hall

      Thanks for the feedback, Ben!

  18. Did we miss out Divi 100 blog No. 82?

    • Sorry about that, looks like we got ahead of ourselves!

  19. Hey ET Guys this is day 82 not 83!!!

    • That’s because, In one of the days they sent an email to only the beta testers. You guys are having this problem because you did not make it into the beta. But that email was referring to one of the blog they posted which you have access to despair not being able to try it. Go above elegant themes website and click on the menu “blog” you’ll find all of them are there.

    • Whoops! I updated the post, thanks for the heads up 🙂

  20. The button #3 not work on Edge win 10

  21. I like and use DIVI theme in my several sites. I like It’s ET Box & Optin Email subscription module most. These make my websites more beautiful.

  22. You are amazing! All the value you are giving to us it is incredible. Thank you 🙂

    • Josh Hall

      Thanks, Helene! That’s awesome to hear.

  23. Great post.

    I’ve been trying to style Gravity Forms submit buttons to match the Divi style – the hover over effect has been most challenging.

    Does anyone have/know the css to accomplish this?

    • Josh Hall

      Hey TJ,

      I use Gravity Forms on most of my sites and have some found success with styling the submit button. You’d need to add this to the Custom CSS section in the general Divi options. Here’s an example of what I use:

      .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] {

      font-size: 1em; width: 90%!important; background-color: #abd37e!important color: white; cursor: pointer; border: none; padding: 20px; border-radius: 35px; text-transform: uppercase; font-weight: bold; }

      ***hover settings***

      .gform_footer input.button:hover, .gform_wrapper .gform_footer input:hover[type=submit] { background-color: #ad5151!important; color: white; cursor: pointer; border: none; }

      Let me know if that helps!

  24. Thanks for providing some awesome, and pretty easy button ideas! I especially love the double button. You mention that it would take more CSS to make it work on tablets and mobile. Any chance you could give some tips for that?

    PS – And thanks for the link to working with CSS.

    • Josh Hall

      Thanks for the feedback, Heather!

      For the double button, you can lower the font size and may need to adjust the margins for the tablet view. On mobile, a double button usually won’t work unless there’s little text, so I usually just do 2 buttons and stack them.

      Let me know if that helps!

  25. Great tips! Does anyone know how to link the button to an iFrame instead of a new page?

  26. Those are nice tips that are really worth reading! Awesome post 🙂

    • Josh Hall

      Thanks Andre! Great to hear.

  27. Very thorough. Thank you!

    • Josh Hall

      Thanks for the feedback, Kolleen! Hope these helped.

  28. I have a lot of buttons to change…
    Thanks in advance~*

  29. Amazing work. Thanks! Will use it 😉

  30. hi team,

    I copied the double button style. I have one issue. The buttons dont take the radius on the left and the right button when adding the custom CSS.

    • Hi Harm, I had the same problem. You’ll probably need to add the !important tag to the css like this;

      border-radius: 25px 0px 0px 25px !Important; <—-

      Make sure you do both left and right buttons!
      I also had to adjust the margins in the CSS (mine needed -84px).
      Hope this helps!

    • Josh Hall

      Hey Harm, looks like Rich answered your issue. Let me know if it worked out!

  31. hi,
    I like the possibilities samples
    I’m testing the “Double Button – Left & Right” and firefox does not look properly… does not make diagonal angle of separation…

    how can I do to fix it?

    cheers!

    • Josh Hall

      Hey Oriol, yea it looks like most version of FF don’t support the clip path CSS function. Hopefully it’ll be able to recognize that moving forward! This clip path site will tell you what’s supported: http://bennettfeely.com/clippy/

  32. Thank you for this tutorial. This Divi buttons is awesome! Used it on my client and guess what.. They loved it!

    • Josh Hall

      Great to hear, Vincent!

  33. How would I do a point? Like this at the right side of the button >

    ====>

    ?

    • Josh Hall

      There’s no icon with that style point, so I’d just copy that and put it to the right of the word. To get it to pop up on the hover-over, it would take some CSS but it’s always possible!

  34. Great tut , These features are appealing me to used Divi

  35. Thanks Josh,
    Great tutorial and have implemented the double button on my site, http://www.1design.ltd/about-us/

    Thanks for your time and effort on these tutorials, they are great fun! Looking forward to the new release.

    Best wishes for the future!
    Rich.

    • Josh Hall

      Thanks, Rich – looks great! Awesome to see these ideas customized on other sites.

  36. Hi, Thank you very much for this excellent tutorial. I’ve been asked to put 3 circle buttons under a circle picture. Please help with this code.

    • Josh Hall

      Hi Carsten, I’ve got another tutorial coming out this weekend that will provide an example and coding for a circle graphic! Check back and let me know if it helps!

  37. Awesome…Thank you so much dear josh ,for these brillianlty creative ideas , m gonna try all of them …THANKS 🙂

  38. Double Button is eye catching !!!

  39. This function seems to no longer exist, so what’s the updated alternative?

    Faraz

    • Nathan B. Weller

      Hi Faraz, I’m not sure what you mean. Everything covered in this post is still possible with Divi and it’s button module.

  40. Is there any way to add a button in the audio module?

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest