Color for UI


Buttons are one type of element where accent colors can be used effectively. As these provide ways for the user to navigate, submit a form, or move onto the next task, the color of a button can determine a lot in the user's eyes.

In addition to selecting the right color for your buttons, there are different states a button has as the user interacts with them. These different states provide a visible signal to the user that an interaction is or is not possible. Two common states used are the hover state and the disabled state.

The hover state typically features a shade or tint of the accent color used for the buttons. This helps a user comprehend that something is happening as they scroll over top of an action.

As a designer, you must also consider how to communicate to your users that a button has been disabled and is no longer actionable. The disabled state implies that the button cannot be clicked, either because it's not an active button or the user must complete steps prior to the button activating.

A good example is a user sign-in form. We can disable the button for signing in until the user has provided us a username or email and a valid password.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.