Site icon Divi Notes

Styling The Caldera Forms Submit Button

With over 90 000 active installs, its user friendly drag-and-drop interface, and frequent updates, Caldera Forms is fast becoming a leading form builder in the WordPress community. Something that isn’t so obvious is styling the forms buttons. In this tutorial I am going to show you four easy ways to do so.

The Full Width Button

If you have a fairly narrow form, a full width button can look quite attractive. Here’s the necessary CSS to achieve this look:

[caldera_form id=”CF59a93ee2bb84c”]

The Center Aligned Button

If you’d like to centre the buttons, use the following CSS. This will center the button relative to the column it’s in.

[caldera_form id=”CF59a952f6879e4″]

The Right Aligned Button

My favourite is the right aligned button, it just feels more natural to have the button on the right of the form. Here’s the CSS for that.

[caldera_form id=”CF59a9542ecbc65″]

Changing The Background And Text Color

And then, if you’d like to add a little color and a hover effect, try the following CSS. It gives the button a background color which changes when you mouse over it.

[caldera_form id=”CF59ac3f0751039″]

Wrapping It Up

There you have it, four simple ways to dolly up the Caldera Forms buttons. In essence, it’s just a matter of targeting the .caldera-grid class and its descendant .btn. You can also mix things up a little by adding background color or any other styling to any of these button styling options, just let your imagination run wild.

Photo by Kira auf der Heide on Unsplash