Learn
Color for UI
Buttons

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.

Instructions

1.

When designing web sites, web applications or mobile applications, designers tend to use a lot of buttons to call attention to actions they want their users to take. To keep these actions users take consistent, naming your buttons properly in your CSS is important.

In this example, the page actions are our primary buttons. While the buttons that appear in our navigation and footer are our secondary buttons.

In the styles.css file, find the CSS selector .button-primary and replace the property background-color from #959595 to #00CF63.

This selector can be found in section 5, Component Styles.

2.

In the styles.css file, find the CSS selector .button-secondary and replace the property background-color from #2A2A2A to #FFAA00.

This selector can be found in section 5, Component Styles.

Folder Icon

Sign up to start coding

Already have an account?