Buttons

Buttons are useful for when users need to take an action, as opposed to links which are for navigation. Examples of actions that can be accompanied by a button:

• Submitting a form
• Downloading a file
• Opening a modal

Buttons can also be used for main call-to-actions but should be used sparingly to maintain their impact.

Button Types

HTML

<!-- button tags and classes -->

<a href="#">
  <button class="primary">Primary</button>
</a>

<a href="#">
  <button class="secondary">Secondary</button>
</a>

<a href="#">
  <button class="plain">Plain</button>
</a>

CSS

/* applies to all buttons */

  button {
    border: 2px solid transparent;
    border-radius: var(--rounded-sm);
    margin: 0.25rem 0.5rem 0.25rem 0;
    padding: 0.75em 1em;
    white-space: nowrap;
    cursor: pointer;
    transition: 250ms all;
  }

/* the focus state should be applied to elements site-wide */
  *:focus {
    outline: 2px dotted !important;
  }  

Primary Button

Use the primary button for main actions like submitting a form and high priority call-to-actions.

  button.primary {
    background: #330072;
    color: #fff;
  }
  button.primary:hover {
    background: #753bbd;
    color: #fff;
  } 

Secondary Button

Secondary buttons accompany primary buttons to provide an additional related action. For example, How to Apply or Learn More.

  button.secondary {
    background: transparent;
    border-color: #330072;
    color: #330072;
  }
  button.secondary:hover {
    background: #753bbd;
    border-color: #753bbd;
    color: #fff;
  }

Plain Button

Use for less important or less commonly used actions since they’re less prominent. For example, plain buttons are used as actions in cards.

button.plain {
    background: transparent;
    color: #330072;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  button.plain:hover {
    color: #330072;
    text-decoration: underline;
  }

Button Groups

Button groups are a way of grouping buttons together when two or more buttons are placed together. They are used to group related options. Buttons inside of a button group follow the same guidelines as the button component. Button groups support any style and size. Use short, descriptive button labels.