For the best experience in interactions with buttons, the response should be clearly communicated. we define three levels of interactions for buttons:

  1. From Disabled to Enabled.
  2. Hover / Click.
  3. Progress indication.

From Disabled to Enabled

Disabled buttons appear when there is a required information to complete a task. it will automatically convert to enabled whenever this task is completed.

Example: The user wants to reset his password. the button will be disabled till the user enter a valid ID.

Hover and Click

The Response that happens when the user starts to interact with a button on the screen. we use shadows to emphasize the action itself. and encouraging the user to take this action.

Progress indication

After any sort of action, the user should be aware “what is going on” – communicating with users while they have to wait is very important – and we use instantly load buttons to communicate this state clearly.