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
[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