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!