Css hover button effect

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 a i 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 ?

I'm not sure I understand the question - could you clarify what your expected result is? — kmoe
– kmoe, Commented May 17, 2014 at 7:49

Rahul · Accepted Answer · 2014-05-17 08:16:06Z

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

answered May 17, 2014 at 8:16

Rahul

5,7728 gold badges39 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

HackerManiac Over a year ago

can u explain what u did ?

Rahul Over a year ago

Sure thing, You put !important for box-shadow of hover property, it was overriding the box-shadow for active element. I just removed it and added it to :active of same.. :-) I hope you got my point.

Rahul Over a year ago

!important is very important :-) it overrides all the other similar properties

HackerManiac Over a year ago

!important means this css property is not important or very important? coz hover is a NOT important and active is IMPORTANT @rahulPatil

HackerManiac Over a year ago

but if so why its called !important ?

|

Collectives™ on Stack Overflow

Css hover button effect

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related