:hover does not seem to be working on custom buttons

Question

I have a couple custom buttons that are working and look fine, except the hover stopped working (should change color on hover. It worked when I first coded but at some point it stopped. I am not sure when it stopped, or why. It is not working in either chrome, firefox or IE8. Obviously I have messed something up but I have yet to find it. I will keep looking and researching, but if you have any ideas, much appreciated.

html:

<input class="left-menu-button" type="button" value="Search" />
<input class="left-menu-button" type="button" value="View Detail" />

css:

.left-menu-button
{
    width: 200px;
    height: 60px;
    color: #fff;
    background-color: #631127;
    border: none;
    margin: 20px 40px 0 0;
    font-size: 1.2em;
    float: right;
}

.left-menu-button:hover
 {
       background-color: #A3143A !important;
 }

Answer 1

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.