Each of these buttons has the state named in the label. ("Hover", "Focused", and "Active" just by applying the appropriate class. Notice how:

• If you hover over "Hover", when you mouse out, the ui-state-hover class gets removed.
• If you give the buttons focus by tabbing through them, the ui-state-focus class will be removed from "Focus" when it loses focus.
• If you click or hover over "Active" (the state a button gets while it is being clicked), it loses the ui-state-active state when you release the mouse button.

Default Disabled Hover Focused Active

Here, the ui-state-error class has been applied directly to each button. As you can see, none of the button states (except "Disabled") work. Not recommended.

Default Disabled Active

Here, the ui-state-highlight class has been applied directly to each button. As you can see, none of the button states (except "Disabled") work. Not recommended.

Default Disabled Active