metamask-extension/ui/app/components/ui/button/buttons.scss

/*
  Buttons
 */

$hover-secondary: #B0D7F2;
$hover-default: #B3B3B3;
$hover-confirm: #0372C3;
$hover-red: #FEB6BF;
$hover-red-primary: #C72837;
$hover-orange: #FFD3B5;

%button {
  @include h6;

  font-weight: 500;
  font-family: Roboto, Arial;
  line-height: 1.25rem;
  padding: .75rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
  transition: border-color .3s ease, background-color .3s ease;

  &--disabled,
  &[disabled] {
    cursor: auto;
    opacity: .5;
    pointer-events: none;
  }
}

%link {
  @include h4;

  color: $Blue-500;
  line-height: 1.25rem;
  cursor: pointer;
  background-color: transparent;

  &:hover {
    color: $Blue-400;
  }

  &:active {
    color: $Blue-600;
  }

  &--disabled,
  &[disabled] {
    cursor: auto;
    opacity: 1;
    pointer-events: none;
    color: $hover-secondary;
  }
}

%small-link {
  @extend %link;
  @include h6;
}

.button {
  @extend %button;
}

.btn-secondary {
  color: $Blue-500;
  border: 2px solid $hover-secondary;
  background-color: $white;

  &:hover {
    border-color: $Blue-500;
  }

  &:active {
    background: $Blue-000;
    border-color: $Blue-500;
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
    color: $hover-secondary;
  }
}

.btn-warning {
  color: $Orange-500;
  border: 2px solid $hover-orange;
  background-color: $white;

  &:hover {
    border-color: $Orange-500;
  }

  &:active {
    background: $Orange-000;
    border-color: $Orange-500;
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
    color: $hover-orange;
  }
}

.btn-danger {
  color: $Red-500;
  border: 2px solid $hover-red;
  background-color: $white;

  &:hover {
    border-color: $Red-500;
  }

  &:active {
    background: $Red-000;
    border-color: $Red-500;
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
    color: $hover-red;
  }
}

.btn-danger-primary {
  color: $white;
  border: 2px solid $Red-500;
  background-color: $Red-500;

  &:hover {
    border-color: $hover-red-primary;
    background-color: $hover-red-primary;
  }

  &:active {
    background: $Red-600;
    border-color: $Red-600;
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
    border-color: $hover-red;
    background-color: $hover-red;
  }
}

.btn-default {
  color: $Grey-500;
  border: 2px solid $hover-default;

  &:hover {
    border-color: $Grey-500;
  }

  &:active {
    background: #FBFBFC;
    border-color: $Grey-500;
  }

  &--disabled,
  &[disabled] {
    opacity: 1;
    color: $hover-default;
  }
}

.btn-primary {
  color: $white;
  border: 2px solid $Blue-500;
  background-color: $Blue-500;

  &:hover {
    border-color: $hover-confirm;
    background-color: $hover-confirm;
  }

  &:active {
    background: $Blue-600;
    border-color: $Blue-600;
  }

  &--disabled,
  &[disabled] {
    border-color: $hover-secondary;
    background-color: $hover-secondary;
  }
}

.btn-link {
  @extend %link;
}

.btn--large {
  min-height: 54px;
}

/**
  All Buttons styles are deviations from design guide
 */

.btn-raised {
  color: $curious-blue;
  background-color: $white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  padding: 6px;
  height: initial;
  min-height: initial;
  width: initial;
  min-width: initial;
}

.btn--first-time {
  height: 54px;
  width: 198px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
  color: $white;
  font-size: 1.25rem;
  font-weight: 500;
  transition: 200ms ease-in-out;
  background-color: rgba(247, 134, 28, .9);
  border-radius: 0;
}

button[disabled],
input[type="submit"][disabled] {
  cursor: not-allowed;
  opacity: .5;
}

button.primary {
  padding: 8px 12px;
  background: #f7861c;
  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
  color: $white;
  font-size: 1.1em;
  font-family: Roboto;
  text-transform: uppercase;
}