HTML CSS Buttons Hover Wont Work Through Class

Question

I don't understand why does this work :

.button:active {
    position:relative;
    top: 2px;
    left:2px;
}

But this wont work :

.button:hover { 
    font-size:17px;
}

It works when I use id but I want it to activate for all buttons :

#btnhome:hover{
    font-size:17px;
}

This works fine but with class it wont? What am I doing wrong?

Answer 1

Using id and it works so sure something has to do with the specificity, over riding, try this

Demo

Demo + !important

.button:hover { 
    font-size:17px !important; /* Actually you don't even need !important */
}