How can I change a button's color on hover?

css button hover
getaway picture getaway · Oct 10, 2010 · Viewed 179.6k times · Source

I need to change the color of a button on hover.

Here is my solution, but it doesn't work.

a.button {
   display: -moz-inline-stack;
   display: inline-block;
   width: 391px;
   height: 62px;
   background: url("img/btncolor.png") no-repeat;
   line-height: 62px;
   vertical-align: text-middle;
   text-align: center;
   color: #ebe6eb;
   font-family: Zenhei;
   font-size: 39px;
   font-weight: normal;
   font-style: normal;
   text-shadow: #222222 1px 1px 0;
}
a.button a:hover{
     background: #383;
}

Answer

Matchu picture Matchu · Oct 10, 2010

a.button a:hover means "a link that's being hovered over that is a child of a link with the class button".

Go instead for a.button:hover.

Related questions

Hover and pressed in javafx

I wrote this css code for button pressed .button:pressed { -fx-scale-y: 0.9; -fx-scale-x: 0.9; } and this for button hover .button:hover { -fx-background-color: #383838; -fx-scale-y: 1.1; } and it doesn't scale down because for the button to be clicked it obviously has to be hovered. Is …

Read More
trying to align html button at the center of the my page

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like …

Read More
How to center buttons in Twitter Bootstrap 3?

I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I …

Read More