clickety-click

Buttons

Invoke and communicate an action that will occur. To assist our users while on our platform we use a particular style of button.

Accessibility

To ensure accessibility at all times we use buttons size that are a minimum size of 42px and maximum size of 72 px on mobile. Also for buttons we use a high contrast color (BOG100 | #344734)

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Usage

The Button can be used as filters or as anchor points with a document to make it easier for the user to get to a particular section in the project page or to filter project list on the homepage. Use buttons for actions to complete a task or to move forward in a process such as "A particular section of a page" There is only one primary action per button.

Example

I am an active button I am inactive button

Code


/* HTML */

<a class="btn btn-custom" href="#" role="button">
    I am an active button</a>
<a class="btn btn-custom btn-inactive" href="#" role="button">
    I am inactive button</a>


/* CSS */

Active Button
.btn-custom {
  background-color: #344734;
  color: #f2f2f2;
}

Active Button Hover
.btn-custom:hover {
  background-color: #344734;
  color: #f1a639;
}

Inactive Button
.btn-inactive {
  background-color: #f2f2f2;
  border: 2px solid #344734;
  color: #8c8954;
}

Inactive Button Hover
.btn-inactive:hover {
  color: #8c8954;
  background-color: #f2f2f2;
}