Correct buttons hover state

Question

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?

Answer 1

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.

_{Image from Adobe XD}

Answer 2

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!

Answer 3

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

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