Buttons

Description

Buttons are used to signify to users that an action is possible and allow that user to take that action. The primary buttons are for primary actions, while secondary buttons are for secondary actions which are typically only needed when a primary button already exists on the page. While the examples below show the default widths of the buttons, the width will depend on the amount of text needed within the button. However, the button width should not exceed 300px (the width of an extra small screen). If more space is needed, it may be better to use a card (see cards here).

Usage

As stated above, primary buttons should be used for primary actions and secondary buttons for secondary actions. Default coloring and size depending on the screen size should be followed as is shown in the examples below.

Accessibility

Make sure to label the buttons in a way that makes it clear what action they trigger.

Examples

Primary Desktop & Tablet Button

For large and extra-large screen sizes like those on a desktop or laptop and for small and medium screen sizes like those on a tablet:

200px x 40px, primary-dark-blue

Primary Desktop & Tablet Button - Hover

primary-accent-blue

Primary Mobile Button

For extra small screen sizes like those on a mobile phone:

175px x 35px, primary-dark-blue

Primary Mobile Button - Hover

primary-accent-blue

Secondary Desktop & Tablet Button

For large and extra-large screen sizes like those on a desktop or laptop and for small and medium screen sizes like those on a tablet:

200px x 40px, secondary-dark-red

Secondary Desktop & Tablet Button - Hover

secondary-accent-red

Secondary Mobile Button

For extra small screen sizes like those on a mobile phone:

175px x 35px, secondary-dark-red

Secondary Mobile Button - Hover

secondary-accent-red

Code

Example primary button:


                        
     <a href="about.html" class="btn button back-dark-blue back-accent-blue-hover">About Me</a>