:hover does not seem to be working on custom buttons

I know this is an old post, but in case someone is having the same issue that I was having I'm going to post.

The solution for me was that the button that wouldn't show the :hover CSS had a custom background that was set via the element ID. I switched it to a class and was able to see the :hover styling after that. I guess ID background styling takes precedence over :hover styling set through the element tag name.

1) Open your page in Google Chrome;
2) Press F12 for "Developer Tools" to open;
3) Select your problematic input;
4) On the right you have the applied styles;
5) On the "Styles" tab, click on the 2nd icon, a cursor inside a dotted rectangle;
6) Select ":hover", so that you can see what's happening when your input is being hovered and find the problem!

I had the same issue. I tried working with the developer tools in Chrome, but to no avail. In the end, it turned out that I needed to delete the extra space between the ID selector and the :hover attribute. For example,

#button :hover {
  background-color: #7e7ecc;
}

#button:hover {
  background-color: #7e7ecc;
}