[Resolved] Change submit button background color on hover

[Author]

Posts

[jillT]

I have a search form and I wish to change the background colour on hover. I am very surprised that there is no choice for this in the settings panel. I tried with css but still couldn't get it to work.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL where you added the search form and tell me what button you want to add the background color.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I've added the following custom CSS code to Custom CSS section of your view. Screenshot: hidden link

.buttons input {
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Arial", serif;
  padding: 8px 40px;
  background: ;
  border: 0px;
  margin-left: 0px;
  margin-right: 50px;
  margin-top: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  color: #FFFAFA;
}
.buttons input:hover
{
  background-color: #50627E;
  outline: none;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
.buttons input:focus {
  outline: none;
}

You can change the background and background-color attribute values for you CSS property for input and input:hover CSS respectively and define your desired color for background and background-color.

[jillT]

Thank you.

Unfortunately, changing the colour for the button did nothing, although it worked for the hover! I did add !important to the colour, but now that has changed ALL buttons, which I did not want. I see that your code also changed the 'clear all filters' as well

I'm just astounded there isn't the option in the settings, rather makes blocks defunct. How do we request this rather important feature?

[jillT]

I have been trying further ways with this.

1) With your css code in place and default settings for the button, the normal colour shows grey (presumably the default of Toolset), while the hover obeyed the theme colour setup for buttons. Changing the colour in your css code did nothing, while adding !important did change the colour, but also obviously for all buttons, which I did not want.

2) On removing your code the normal button does not follow the theme's colour setup for buttons and shows grey.

3) With toolset overriding the theme button colours, I changed the settings for the submit button background colour, but we already know that in doing that we cannot change the hover colour - toolset overrides the theme and has no option for hover.

I've given up now, but I would like to put forward that Toolset fix the problem of over-riding the theme colours, and/or add the possibility to change hover and focus to the settings for submit buttons.

[Minesh]

Regarding offering the hover color feature, you can always file a feature request using the following form:
- https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

I tried to access the page you created but it seems you deleted it, if you still require help to change the button color on hover, please share the problem URL so I can give you working CSS code and please share what color you want to setup as hover.

[jillT]

Thank you. As I mentioned I gave up on it as I really needed to move on and I moved the page on to the live one. I settled for adding a shadow which shows people they're hovering.