CSS悬停按钮效果

Question

look at this fiddle JS FIDDLE When i hover( :hover ) background changes but when clicked ( :active ) box-shadow is not changed dont know why ? This does not happen if another button does not change background on hover !

in this fiddle i want somehthing like combination of button 1 and button 2

.white-button {
    background: #FFF;
    font-weight: normal;
    color: #3b3b3b;
    border: 1px solid #DDD;
    box-shadow: 0 0 2px #ccc;
    font-family: MV boli,Tahoma;
    margin: 5px;
    padding: 5px 10px 5px 10px;
    font-size: 15px;
}
.positive:enabled:hover {
    background: #99CD30;
    box-shadow: inset 2px -7px 11px rgba(80, 92, 51, 0.17)!important;
}
button:active {
    border-bottom-color: #999;
    box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
}
.gray-button{
    background:#eee;
    padding:5px 10px;  
    border: 1px solid #999;
    border-bottom-color: #888;
}

For those who cant under stand!

As you see there are 3 buttons on fiddle with name like lets say then button A,B and C respectively.

• Now when i hover A i get a green background with an inset box-shadow .
• When i hover B i get a green background with no inset shadow

• When i hover C i get nothing

• When i click A it remains same

• when i click B an inset shadow is created
• when i click C an an inset shadow is created

Now the button i want is D i want

• when i hover D i get ai get a green background with an inset
  box-shadow .

• when i click D an another inset shadow is created replacing previous one.

  but that does not happen dont know why ?

Answer 1

I hope this is how you want it..

http://jsfiddle.net/rahulrulez/M2f9F/3/

I just played with properties that are !important

.white-button {
background: #FFF;
font-weight: normal;
color: #3b3b3b;
border: 1px solid #DDD;
box-shadow: 0 0 2px #ccc;
font-family: MV boli,Tahoma;
margin: 5px;
padding: 5px 10px 5px 10px;
font-size: 15px;
}

.positive4:hover {
background: #99CD30;
box-shadow: inset 2px -7px 11px rgba(80, 92, 51, 0.17);
}

.positive4:active {
border-bottom-color: #999;
box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2) !important;    
}

I hope this answers your question