Can hover and focus states be the same?
Focus states cannot be the same as the hover states. However the hover state should be included with the focus styles. Be aware of the thickness of lines used for a focus state. Lines smaller than 2px may be technically accessible, but will be hard to see.
What are the differences between hover and active?
Hover: It is the state that occurs by putting your cursor over the button. You cannot see this state using the keyboard. Active: Very simply, it is the state of an element that is active. For example, in our example, it is the state of interacting with the button.