From looking through the web at various buttonset examples, many of them have the hover and the active css style as the same. In other cases its quite different (with Active having a complete "reverse" of the hover style.

From a UI point of view, is this pure preference or is there any evidence that one is better then the other?

  • 1
    If Safari's default UI is anything to go by, best practice is to have the OSX equivalent of :active (used everywhere) be very different from the default style, and :hover highlight non-obvious clickable areas (e.g. text in the bookmark bar). Apr 26, 2014 at 15:51

2 Answers 2


I'd suggest that while it doesn't matter for mobile touch devices, that it does matter for traditional desktop devices. If the hover and the active styles for a button are the same, then you've removed any visual feedback for the user when they click the button with a mouse. You need to carefully choose your :active style, as that'll be used for taps, keyboard submits, and mouse clicks, but for mouse users the :hover style should not be the same as the :active style. Either omit it, or make it different, so those users still get the proper feedback when using the button control.


Well, I would suggest the 'evidence' that you seek is our move to a mobile-first mentality.

What I mean by this, and what I often ask when someone asks me to show them the 'hover' state.. "Please show me how you hover on an iPad/iPhone/Android etc."

The 'hover' state while still practical is going the way of so many other now out dated tags IMO. Sure it will still be needed, but by fewer and fewer users.

  • So is your answer "it doesnt matter "?
    – leora
    Apr 28, 2014 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.