How to Make any Non-Divi Button Look like a Divi Button
Have you ever installed a 3rd party plugin that includes some sort of button, only to have the button look like total garbage?
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:
- In Divi Theme Options Integration Tab for Body
- 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.