How to Make any Non-Divi Button Look like a Divi Button

by | Nov 4, 2020 | DIVEMBER, Divi Tutorials | 22 comments

Welcome to D I V E M B E R (Divi + November) here at Divi Life! All month long during November we’re going LIVE on Facebook & YouTube, and publishing new tutorials, freebies, new product features, new product releases, and more! Make sure you subscribe to our email list so you don’t miss any of the action or awesome free stuff! And, follow us on Facebook & YouTube to be notified when we go LIVE.

Have you ever installed a 3rd party plugin that includes some sort of button, only to have the button look like total garbage?

Example:

With Divi, we’re spoiled. We can make the buttons in the button module, contact form module, opt-in module, or any other module look awesome! Even if we don’t style the button specifically for that module, Divi automatically applies the default button styling that you have defined in the Theme Customizer for buttons.

But with 3rd party plugins, the included buttons don’t have this luxury. You’re typically stuck writing custom CSS to make the buttons look decent, or if you’re lucky, the plugin will have built in controls for styling the button. Although the built in controls for styling typically aren’t nearly as intuitive to what we’re used to in Divi.

Well in today’s tutorial, we have a super simple JQUERY snippet that solves this problem! 😍

In a nutshell, the snippet will inject Divi’s button class into the 3rd party plugin button, which will automatically apply the button styling that you have defined in the Divi Theme Customizer.

The Jquery to Style 3rd Party Buttons Like the Divi Button

Here’s the code snippet! As you can see, it’s not very much. You can copy this code snippet and place it in one of the following places:

  1. In Divi Theme Options Integration Tab for Body
  2. In a code module anywhere on the page

The code above can’t be used as-is. You first need to replace add the CSS string path to target the button you’re trying to customize.

You can get the class of the button you’re wanting to make look like the Divi button by using your browser’s Inspect Element Tool.

In the example below, we’re wanting to change the default form submit button for Contact Form 7 (the most popular form plugin for WordPress).

To get the class of the submit button, we right clicked on the button and then hit “Inspect”. Then, we copied the class wpcf7-submit which is the one we want to target.

Now that we have the proper class, we can add it to the code snippet above, so it will properly target the submit button for Contact Form 7.

The code snippet now looks like this:

Now we can add the snippet into a code module on the same page where our form exists. And voilá, our submit button will now have the styling that is defined in the Divi Theme Customizer Button Settings:

Shortcuts to Apply Divi Button Styling to Popular Form Plugins

Using the method above, you can definitely get the CSS string needed to target any button from any plugin. However, we want to make things even easier on you, so we’ve done the work for you!

Below you’ll find the snippet needed to transform the default submit button from the most popular form plugins for WordPress, into a gorgeous Divi button.

Note: Some of the form plugins above will apply their own styling to the submit button. However, all of them have settings to disable the built in CSS styling. We recommend doing that, otherwise the snippet will not work properly, as the default form button styling will conflict with the Divi button styling.

That’s it! Pretty slick, huh? As you can imagine, you can use the snippet above to inject classes for other purposes too. We’ll definitely circle back and add more tutorials in the future with other creative uses.

22 Comments

  1. Avatar

    Exactly what I was looking for thanks, Tim.

    Reply
  2. Avatar

    Bernardo Here,

    Live from Lisbon in Portugal

    Reply
  3. Avatar

    Replay Barbados

    Reply
  4. Avatar

    Hello,
    There are many plugins for WooCommerce that have
    this kind of button and very often we cannot
    modify them, or very little.
    Thank you for this tutorial and the code.

    Reply
    • Avatar

      You’re welcome! And yes, it can be very frustrating!

      Reply
  5. Avatar

    Very cool! Thank you for this tip, much appreciated.

    Reply
  6. Avatar

    Hi,

    Thank you for this!

    Watching the replay from South Africa 🙂

    Reply
    • Avatar

      You’re welcome! Thanks for watching 🙂

      Reply
  7. Avatar

    Replay – Patrick from Essex, UK.

    Reply
  8. Avatar

    Hi Tim,
    nice Tutorial!

    I was just wondering if you could turn a Divi button into a “submit” bottom, so I could handle a submit button from any form plugin it like any other module.

    Maybe you see a solution there?

    Thanks, Marcel from GER

    Reply
    • Avatar

      Hi Marcel,

      Do you mean have a Divi Button module submit a form from another plugin? It may be possible with some custom javascript, but I think you would be better off costuming the button that comes from the form to look the way you want.

      Reply
      • Avatar

        Hey Tim,
        thats what I meant, yeah. Sure it would be fine costuming the button out of the form, but the thing is the designer wants to position the button in a slightly unusual way (fine for ux reasons ;-)) which would be much more easy to achieve if I could handle it like a button module.
        Cheers!

        Reply
        • Avatar

          Hi Marcel,

          Thanks for the clarification. I understand now. In that case, I still think it would be easier to reposition the button with CSS or Javascript.

          Reply
  9. Avatar

    SO helpful. This was driving me insane! I was looking for a solution to this a few days ago and then your email popped up in my inbox. Impeccable timing. Thanks!

    Reply
  10. Avatar

    Replay from Nashville TN. I really hope I can use this for the Campaign Monitor code snippets for our sign-up forms. It’s not from a plug-in, just code they provide to embed a sign-up form. Campaign Monitor’s stylized code interferes with Divi, so I have to use the stripped code with an ugly button.J

    Reply
    • Avatar

      Thanks for watching 🙂 Unfortunately I don’t believe this would work for an embed. Embeds are iframes, and since the HTML doesn’t actually “live” on your website, you can’t change the styling or anything like that. The iframe is essentially a “window” to code on another server.

      Reply
    • Avatar

      You shouldn’t need it with WooCommerce buttons since Divi is integrated with WooCommerce already. But yes, the method will work the same for WooCommerce 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This