Genesis - Ninja Forms button color

Ninja Forms recently changed the underlying markup of the "Submit" button. If your Submit button is not looking quite right, you can try disabling Opinionated Styles at Ninja Forms > Settings.

If that doesn't improve the appearance of your Submit button, grab the following code snippet and paste it at Appearance > Customize > Additional CSS. This will allow you to fully control the colors of the Submit button.

.nf-form-content .submit-wrap input.nf-element {
    background: #000000 !important;
    color: #ffffff !important;
    font-size: 12px !important;
}

.nf-form-content .submit-wrap input.nf-element:hover {
    background: #777777 !important;
    color: #ffffff !important;
}

How to add your own colors to the code

The first section is the button in its normal state. You can replace the #000000 and #ffffff values with your preferred color values. You can also modify the font size of the button here.

The second section is the button in its hover state (when the button is hovered over). You can replace the #777777 and #ffffff values with your preferred color values.

Make sure to keep the !important tags in place when adding your own colors – this will ensure your chosen colors take precedence over the Ninja Forms colors.