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:
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.
The Right Aligned Button
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.
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.