Submit Button Hover Color Not Displaying Correct Color

  • Resolved tjarena

    (@tjarena)


    1 year, 3 months ago

    Hello, using WPForms, I have applied CSS formating to the Submit Button so that it appears a shade of blue (#004990) while the border and text color are white (#ffffff). When hovering, I have the CSS set to reverse this color scheme (button is white while the border and text are blue), however, when I do this and look at the hover color of the button, it appears gray on the website. I took a snapshot of the color and brought it into Photoshop and see that it is #D1D1D1. Is there some sort of shadowing in place when the mouse is hovering over the button? How do I get it to appear white?

    The entire CSS formatting for the form is below. The hover section is the last grouping of the code.

    .wpforms-form input[type=submit], 
.wpforms-form button[type=submit] {
    background-color: #004990 !important; /* background color*/
	    border: 1px solid #ffffff !important; /* border color*/
    color: #ffffff !important; /* text color */
    font-size: 1.5em !important; /* Size of text */
    padding: 1px 10px !important; /* Distance between text and border */
	 border-radius: 5px !important;
	
}

.wpforms-submit-container {
     text-align: center !important;
}

.wpforms-form input[type=submit]:hover, 
.wpforms-form input[type=submit]:active, 
.wpforms-form button[type=submit]:hover, 
.wpforms-form button[type=submit]:active, 
.wpforms-form .wpforms-page-button:hover, 
.wpforms-form .wpforms-page-button:active {
    background-color: white !important; /*background*/
    border: 1px solid #004990 !important; /*border*/
	color: #004990 !important;
}

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey @tjarena – Thanks for reaching out!

    I looked into the form, and I noticed that the theme is adding some CSS that’s giving the shadow effect on hover. To make the changes that you’re looking for, here’s a snippet that you can use: 

    div.wpforms-container-full button[type=submit]:hover {
    box-shadow: none !important;
    background-color: #fff !important;
    background: #fff !important;
    color: #00056D !important;
}

    And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter tjarena

    (@tjarena)

    @prashantrai

    Thank you! I knew it was something simple like that. I appreaciate the help!

    Hey @tjarena – You’re most welcome ?? If you have any questions, please feel free to reachout.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Submit Button Hover Color Not Displaying Correct Color’ is closed to new replies.