Buttons and Links – Design Portal

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.

Demo

This is a content link.

<button class="button" type="button">Button</button>
<p>This is a <a class="link" href="http://www.system1.com">content link</a>.</p>

.button {
  @include font(normal, 700, 1rem, 1.2, var(--body-font));
  background-color: var(--accent-1);
  border-radius: 0.25rem;
  color: #fff;
  padding: 0.75rem 3rem 0.7rem 3rem;
  text-transform: uppercase;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &:not(.button--outlined):not(.newsletter__button) {
    box-shadow: 0 0.25rem 0 #006465;
  }

  &:hover,
  &:focus {
    background-color: #006465;
  }

  &--outlined {
    background-color: transparent;
    border: 0.0625rem solid var(--accent-1);
    color: var(--accent-1);

    &:hover,
    &:focus {
      background-color: var(--accent-1);
      color: #fff;
    }
  }
}

.link {
  color: var(--primary);
  display: inline-block;
  margin-block-start: 1rem;
  text-decoration: none;

  &:hover, &:focus {
    text-decoration: underline;
  }
}

No JS! 😀

Note

Buttons styles vary depending on the theme.

States & Variations

Standard

<button class="button" type="button">Button</button>
// or
<a class="button" href="https://www.system1.com">Button</a>

Outlined

<button class="button button--outlined" type="button">Button</button>
// or
<a class="button button--outlined" href="">Button</a>

Disabled

<button class="button" type="button" disabled>Button</button>
// or
<a class="button" href="" disabled>Button</a>

Standard Link

This is a content link.

<p>This is a <a href="https://www.system1.com">content link</a>.</p>

Open link in a new tab

This is a content link that opens in a new tab.

<p>This is a <a href="https://www.system1.com" target="_blank">content link</a> that opens in a new tab.</p>