Disable/remove css3 transitions after :active psuedo-class -

Disable/remove css3 transitions after :active psuedo-class -

so have typical scenario: button styled transition colour when hovered on using :hover psuedo-class. button has :active triggered class, changes colour 1 time again when clicked on; time don't want transition, class has transitions disabled (i want alter snappy).

the problem have whilst works mousedown part of click, doesn't mouseup part because :active state no longer nowadays 1 time mouse button has been released, , causes transitions (that part of class definition button) apply.

is there way of getting work such hover in/out applies alter transition click down/up not? redo behaviours in jquery; ideally i'd accomplish without resorting javascript.

a working illustration here.

thanks.

you can trick

for instance, can alter color, not background, shadow:

button:active { -webkit-box-shadow: inset 0 0 100px green; }

then, remaining alter limit transition background-color, instead of all

button { transition: background-color 1s; }

not wanted, close can :-)

css3 css-transitions pseudo-class