How To Turn-Off The Fluent Forms Button Hover Transition Overlay Effect

Fluent Forms is a terrific form builder plugin for WordPress.

It makes full-featured Contact Forms | Payment Forms | Conversational Forms | Calculator Forms | Registration Forms | and Quiz & Survey Forms.

It also has these powerful features: Drag & Drop Visual Builder | Payments and Donations | Fully Responsive | Multi-Step Forms | ChatGPT Integration | Conditional Logic | Numeric Calculation | AI Form-Builder | Form to PDF | Form Scheduling | Connect to CRM | Visual Data Reporting | Inventory Management | Action Hooks for Developers.

I use Fluent Forms Pro on most of my client websites. Its powerful, easy-to-use, and affordable.

That said there is one default feature that I always turn-off... the button hover transition overlay effect.

I prefer to use CSS to create whatever button hover effects I want. So, in this post I'm going to share how to turn off Fluent Forms button hover transition overlay effect.

To remove the button hover transition overlay effect you target the .ff-btn-submit class.

Here's how to do it:

1. Login to your WordPress admin.

2. Go to your theme’s CSS editor

2b. Or, go to Appearance (left-sidebar) > Customize > Additional CSS

3. Copy and paste the following CSS code:

/* Remove Fluent Forms submit button hover overlay/transition effect */

.ff-btn-submit {
    transition: none !important;
}

.ff-btn-submit:hover {
    background-color: inherit !important; /* or specify a solid color */
    opacity: 1 !important;
}

Optional: Set a fixed button color.

Use this CSS if you want the button color to stay the same on hover:

.ff-btn-submit, .ff-btn-submit:hover {
    background-color: #0073e6 !important; /* replace with your desired color */
    color: #fff !important; /* ensure text remains visible */
    opacity: 1 !important;
}

This CSS disables the Fluent Forms button hover transition overlay effect and removes any darkening/lightening effect on hover.

Enjoy!