Buttons

Class

FilledOutlineTonalTextX-Large

Label

States

EnabledHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.btn {
  border: 0;
  font-weight: 500;
  font-size: 14px;
  font-family: $text-font-stack;
  text-decoration: none;
  transition: all 100ms ease-in;
  white-space: nowrap;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 5px 0;
  width: 83px;
  height: 40px; 
  border-radius: 100px; 
}

.btn-filled {
  background-color: var(--button-primary-color, $button-primary-color);
  color: var(--color-white, $color-white);
  --md-typeset-a-color: var(--color-white, #{$color-white});
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-white, $color-white);
    opacity: 0;
    pointer-events: none;
  }

  &:hover,
  &.hover {
    box-shadow: var(--button-shadow, $button-shadow);

    &::after {
      opacity: var(--button-overlay-hover, $button-overlay-hover);
    }
  }

  &:focus,
  &.focus {
    &::after {
      opacity: var(--button-overlay-focus, $button-overlay-focus);
    }
  }

  &:active,
  &.pressed {
    &::after {
      opacity: var(--button-overlay-active, $button-overlay-active);
    }
  }

  &:disabled, 
  &.disabled {
    background-color: var(--color-white, $color-white);
    color: var(--button-disabled-text-secondary, $button-disabled-text-secondary);
    pointer-events: none;

    &::after {
      background-color: var(--button-disabled-overlay, $button-disabled-overlay);
      opacity: 0.12;
    }
  }
}

.md-typeset a.btn.btn-filled:hover,
.md-typeset a.btn.btn-filled.hover {
  color: var(--color-white, $color-white);
}

<a href="#" class="btn btn-filled">Label</a>

<a href="#" class="btn btn-filled hover">Label</a>

<a href="#" class="btn btn-filled focus">Label</a>

<a href="#" class="btn btn-filled pressed">Label</a>

<a href="#" class="btn btn-filled disabled">Label</a>

Label

States

EnabledHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.btn {
  border: 0;
  font-weight: 500;
  font-size: 14px;
  font-family: $text-font-stack;
  text-decoration: none;
  transition: all 100ms ease-in;
  white-space: nowrap;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 5px 0;
  width: 83px;
  height: 40px; 
  border-radius: 100px; 
}

.btn-outline {
  background-color: var(--color-white, $color-white);
  color: var(--button-primary-color, $button-primary-color);
  --md-typeset-a-color: var(--button-primary-color, #{$button-primary-color});
  border: 1px solid #6F797A;
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-green, $color-green);
    opacity: 0;
    pointer-events: none;
  }

  &:hover,
  &.hover {
    &::after {
      opacity: var(--button-overlay-hover, $button-overlay-hover);
    }
  }

  &:focus,
  &.focus {
    border-color: var(--button-primary-color, $button-primary-color);

    &::after {
      opacity: var(--button-overlay-focus, $button-overlay-focus);
    }
  }

  &:active,
  &.pressed {
    &::after {
      opacity: var(--button-overlay-active, $button-overlay-active);
    }
  }

  &:disabled,
  &.disabled {
    color: var(--button-disabled-text, $button-disabled-text);
    --md-typeset-a-color: var(--button-disabled-text, $button-disabled-text);
    border-color: #E0E0E0;
    pointer-events: none;
  }
}

.md-typeset a.btn.btn-outline:hover,
.md-typeset a.btn.btn-outline.hover {
  color: var(--button-primary-color, $button-primary-color);
}

<a href="#" class="btn btn-outline">Label</a>

<a href="#" class="btn btn-outline hover">Label</a>

<a href="#" class="btn btn-outline focus">Label</a>

<a href="#" class="btn btn-outline pressed">Label</a>

<a href="#" class="btn btn-outline disabled">Label</a>

Label

States

EnabledHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.btn {
  border: 0;
  font-weight: 500;
  font-size: 14px;
  font-family: $text-font-stack;
  text-decoration: none;
  transition: all 100ms ease-in;
  white-space: nowrap;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 5px 0;
  width: 83px;
  height: 40px; 
  border-radius: 100px; 
}

.btn-tonal {
  background-color: var(--button-secondary-color, $button-secondary-color);
  color: var(--button-tonal-text, $button-tonal-text);
  --md-typeset-a-color: var(--button-tonal-text, #{$button-tonal-text});
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--button-tonal-overlay, $button-tonal-overlay);
    opacity: 0;
    pointer-events: none;
  }

  &:hover,
  &.hover {
    box-shadow: var(--button-shadow, $button-shadow);

    &::after {
      opacity: var(--button-overlay-hover, $button-overlay-hover);
    }
  }

  &:focus,
  &.focus {
    &::after {
      opacity: var(--button-overlay-focus, $button-overlay-focus);
    }
  }

  &:active,
  &.pressed {
    &::after {
      opacity: var(--button-overlay-active, $button-overlay-active);
    }
  }

  &:disabled,
  &.disabled {
    color: var(--button-disabled-text, $button-disabled-text);
    --md-typeset-a-color: var(--button-disabled-text, $button-disabled-text);
    background-color: transparent;
    pointer-events: none;
  }
}

.md-typeset a.btn.btn-tonal:hover,
.md-typeset a.btn.btn-tonal.hover {
  color: var(--button-tonal-text, $button-tonal-text);
}

<a href="#" class="btn btn-tonal">Label</a>

<a href="#" class="btn btn-tonal hover">Label</a>

<a href="#" class="btn btn-tonal focus">Label</a>

<a href="#" class="btn btn-tonal pressed">Label</a>

<a href="#" class="btn btn-tonal disabled">Label</a>

Label

States

EnabledHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.btn {
  border: 0;
  font-weight: 500;
  font-size: 14px;
  font-family: $text-font-stack;
  text-decoration: none;
  transition: all 100ms ease-in;
  white-space: nowrap;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 5px 0;
  width: 83px;
  height: 40px; 
  border-radius: 100px; 
}

.btn-text {
  color: var(--button-primary-color, $button-primary-color);
  --md-typeset-a-color: var(--button-primary-color, #{$button-primary-color});
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-green, $color-green);
    opacity: 0;
    pointer-events: none;
  }

  &:hover,
  &.hover {
    &::after {
      opacity: var(--button-overlay-hover, $button-overlay-hover);
    }
  }

  &:focus,
  &.focus {
    &::after {
      opacity: var(--button-overlay-focus, $button-overlay-focus);
    }
  }

  &:active,
  &.pressed {
    &::after {
      opacity: var(--button-overlay-active, $button-overlay-active);
    }
  }

  &:disabled,
  &.disabled {
    color: var(--button-disabled-text, $button-disabled-text);
    --md-typeset-a-color: var(--button-disabled-text, $button-disabled-text);
    background-color: transparent;
    pointer-events: none;
  }
}

.md-typeset a.btn.btn-text:hover,
.md-typeset a.btn.btn-text.hover {
  color: var(--button-primary-color, $button-primary-color);
}

<a href="#" class="btn btn-text">Label</a>

<a href="#" class="btn btn-text hover">Label</a>

<a href="#" class="btn btn-text focus">Label</a>

<a href="#" class="btn btn-text pressed">Label</a>

<a href="#" class="btn btn-text disabled">Label</a>

Label

States

EnabledHoverFocusedPressedDisabled

Label

Label

Label

Label

Label

Code

CSSHTML

.btn {
  border: 0;
  font-weight: 500;
  font-size: 14px;
  font-family: $text-font-stack;
  text-decoration: none;
  transition: all 100ms ease-in;
  white-space: nowrap;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 5px 0;
  width: 83px;
  height: 40px; 
  border-radius: 100px; 
}

.btn-xlarge {
  background-color: $button-primary-color;
  color: $color-white;
  --md-typeset-a-color: #{$color-white};
  font-size: 24px;
  width: 147px;
  height: 72px;
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $color-white;
    opacity: 0;
    pointer-events: none;
  }

  &:hover,
  &.hover {
    box-shadow: $button-shadow;

    &::after {
      opacity: $button-overlay-hover;
    }
  }

  &:focus,
  &.focus {
    &::after {
      opacity: $button-overlay-focus;
    }
  }

  &:active,
  &.pressed {
    &::after {
      opacity: $button-overlay-active;
    }
  }

  &:disabled, 
  &.disabled {
    background-color: $color-white;
    color: $button-disabled-text-secondary;
    pointer-events: none;

    &::after {
      background-color: $button-disabled-overlay;
      opacity: 0.12;
    }
  }
}

.md-typeset a.btn.btn-xlarge:hover,
.md-typeset a.btn.btn-xlarge.hover {
  color: $color-white;
}

<a href="#" class="btn btn-xlarge">Label</a>

<a href="#" class="btn btn-xlarge hover">Label</a>

<a href="#" class="btn btn-xlarge focus">Label</a>

<a href="#" class="btn btn-xlarge pressed">Label</a>

<a href="#" class="btn btn-xlarge disabled">Label</a>