Customizing Submit Button

I found through the forum code to add to change the submit hover button. When I did this the changes took effect in my form builder but not on the actual form preview. The code that was added was: 

.form-submit-button:hover {

    background : #ee2924;

}

Is there a way also to keep the colors from flashing after you mouse away. For example when I mouse off the button it looks almost that it has a transparent background before going back to the original color. 

Thank You!

Hi @rocketboy!

I have checked your form and can see that the CSS code is working as it should. You can use the following CSS code to change the color and make the animation more solid:

.form-submit-button:hover {

    background : #008000 !important;

    color : white !important;

}

You can substitute the color # to any one you would like. Here is a list of all CSS colors: https://www.quackit.com/css/css_color_codes.cfm.

Thank you for your input.

After clearing my history/cache I'm still not seeing the correct CSS changes at the URL:

https://form.jotform.com/91495767982983

I updated my CSS to include the  !important; text.

The hover color is supposed to be red but I see green when testing it live. The preview from the builder does show the hover color correctly.

I also see that the button turns transparent after you move the mouse away from hovering over the button. How can I keep the button from turning transparent after hover is done?

Hi @rocketboy!

I was able to replicate the issue of button turning transparent when using that particular color code. I have replaced the CSS code on your form with this:

.form-submit-button:hover {

    background : #981A17 !important;

    color : white !important;

}

The button appears to be working as expected. Please let me know if you would like to use a lighter shade of red or if you have any additional questions.

That helps a lot, thank you!

Just so I understand correctly, that specific color code was causing the error? If so, is there anything specific to stay away from with RGB values? 

We have tried three different colors as hover color.



I think the whole codes worked properly. With the "!important" tag, I do not think you will encounter an issue.

Thank you for your follow up. 

Once I added back the color I needed, I'm still seeing odd behavior with the button. Currently using the code:

.form-submit-button:hover {

    background : #ee2924 !important;

    color : white !important;

}

I've tested on multiple devices and I see a darker red before it goes to the light red thats coded for the button hover. Is there any other ways to keep this from happening on hover?

Form URL: https://form.jotform.com/91495767982983

In fact, this is just a transition of the background from green to red. These are our colors.

We are seeing the transition.
You can reduce this transition time with this code. 
button.form-submit-button:hover {
background : #ee2924 !important;
color : white !important;
}
button.form-submit-button{
transition: all 0.2s ease-in-out;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
-webkit-transition: all 0.2s ease-in-out;
} 
Transition time. 

Thank you for that info, that helps a lot!