Button

HTML

  
<button class="button button--primary" type="submit" formaction="http://cdr.virelai.co.uk">Submit</button>



  
<button class="button button--tertiary" type="button">Continue</button>

SCSS

    .button {
  @include small-font;
  position: relative;
  height: 42px;
  min-width: 150px;
  padding: 0 8px;
  border: 0;
  background-color: $grey-L52;
  box-shadow: 0 4px 0 0 $grey-L35;
  cursor: pointer;

  &:hover,
  &:focus,
  &:active,
  &.hover {
    color: $grey-D10;
    background-color: $grey-L35;
    box-shadow: 0 4px 0 0 $grey-L20;
  }

  &:active,
  &.active {
    top: 4px;
    box-shadow: 0 -4px 0 0 $grey-L20;
  }

  &:disabled,
  &:disabled.hover,
  &:disabled.active {
    top: 0 !important;
    color: $grey-L35 !important;
    background-color: $grey-L66 !important;
    box-shadow: 0 4px 0 0 $grey-L60 !important;
    cursor: default;
  }

  &.button--primary {
    color: $white;
    background-color: $coral;
    box-shadow: 0 4px 0 0 $coral-D20;

    &:hover,
    &:focus,
    &.hover {
      color: $white;
      background-color: $coral-D20;
      box-shadow: 0 4px 0 0 $coral-D28;
    }

    &:active,
    &.active {
      color: $white;
      background-color: $coral-D20;
      box-shadow: 0 -4px 0 0 $coral-D28;
    }
  }

  &.button--secondary {
    color: $white;
    background-color: $turquoise;
    box-shadow: 0 4px 0 0 $turquoise-D12;

    &:hover,
    &:focus,
    &.hover {
      color: $white;
      background-color: $turquoise-D12;
      box-shadow: 0 4px 0 0 $turquoise-D20;
    }

    &:active,
    &.active {
      color: $white;
      background-color: $turquoise-D12;
      box-shadow: 0 -4px 0 0 $turquoise-D20;
    }
  }

  &.button--tertiary {
    color: $grey;
    background-color: $grey-L52;
    box-shadow: 0 4px 0 0 $grey-L35;

    &:hover,
    &:focus,
    &.hover {
      color: $grey-D10;
      background-color: $grey-L35;
      box-shadow: 0 4px 0 0 $grey-L20;
    }

    &:active,
    &.active {
      color: $grey-D10;
      background-color: $grey-L35;
      box-shadow: 0 -4px 0 0 $grey-L20;
    }
  }
}

.button--next {
  width: 140px;
  right: 21px;
  color: $white;
  background-color: $turquoise;
  box-shadow: 0 4px 0 0 $turquoise-D12;

  &::after {
    position: absolute;
    top: 0px;
    right: -21px;
    display: block;
    width: 21px;
    height: 46px;
    content: '\00a0';
    background: url('/images/button-arrow-turquoise.svg') top right no-repeat;
    // z-index: -10;
  }

  &:hover,
  &:focus,
  &.hover {
    color: $white;
    background-color: $turquoise-D12;
    box-shadow: 0 4px 0 0 $turquoise-D20;

    &::after {
      background-image: url('/images/button-arrow-turquoise-hover.svg')
    }
  }

  &:active,
  &.active {
    color: $white;
    background-color: $turquoise-D12;
    box-shadow: 0 -4px 0 0 $turquoise-D20;

    &::after {
      top: -4px;
      background-image: url('/images/button-arrow-turquoise-active.svg')
    }
  }

  &:disabled {
    &::after {
      background-image: url('/images/button-arrow-disabled.svg')
    }

    &:active::after {
      top: 0;
    }
  }
}

.button--previous {
  width: 140px;
  left: 21px;
  color: $grey;
  background-color: $grey-L52;
  box-shadow: 0 4px 0 0 $grey-L35;

  &::before {
    position: absolute;
    top: 0px;
    left: -21px;
    display: block;
    width: 21px;
    height: 46px;
    content: '\00a0';
    background: url('/images/button-arrow-grey.svg') top left no-repeat;
    // z-index: -10;
  }

  &:hover,
  &:focus,
  &.hover {
    color: $grey-D10;
    background-color: $grey-L35;
    box-shadow: 0 4px 0 0 $grey-L20;

    &::before {
      background-image: url('/images/button-arrow-grey-hover.svg')
    }
  }

  &:active,
  &.active {
    color: $grey-D10;
    background-color: $grey-L35;
    box-shadow: 0 -4px 0 0 $grey-L20;

    &::before {
      top: -4px;
      background-image: url('/images/button-arrow-grey-active.svg')
    }
  }

  &:disabled {
    &::before {
      background-image: url('/images/button-arrow-disabled.svg')
    }

    &:active::before {
      top: 0;
    }
  }
}

a.button-link:link,
a.button-link:visited,
a.button-link:hover,
a.button-link:focus,
a.button-link:active {
  text-decoration: none;
}

.form-actions--full-width {
  button {
    width: 100%;
    margin-bottom: 16px;
  }
}

Connect Dementia Research

Pattern Library

Button

HTML

SCSS