I'm designing an e-commerce interface, and I've a doubt about the correct hover state of the primary button.
Is it correct to style the primary button as the secondary's default on hover state as in the picture?
enter image description here

3 Answers 3


I think it leads to confusing two concepts: function and state.

  • Button function: interactive UI element
  • Button state: the different forms an element can take based on the the context that it is being used in.

enter image description here

Image from Adobe XD


I don't suggest using one button's default state as another ones hover state, because there can be situations where you need to use both sets of buttons next to each other. Imagine having a situation where you would want to have a "ok" & a "cancel" button. Obviously because of their importance they can not be both of primary type or secondary, so there would be a problem. What I've seen in many well established design systems is that the hover and press states are slightly different from the default state of the button. I've attached an example from SAP fiori design system. Hope it helps!

enter image description here


I think this might beat the purpose of having the different states of interaction, instead you might fill the secondary button with a green color having opacity of 20% for example, take a look at the picture I've attached

enter image description here

this is of course applicable if you don't wish to use shadows in your design

this a link to a nice article explaining more about the matter

Your Answer

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

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