<div>
  <button class="btn">Standard</button>
  <button class="btn-secondary">Secondary</button>
  <button class="btn-submit">Submit</button>
  <button class="btn-cancel">Cancel</button>
</div>

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

// variables
$cancel: #C33764;
$secondary: #F2994A;
$standard: #155799;
$submit: #159957;
$white: #F1F2F2;
$transition: all 0.25s ease-in-out;

// mixin
@mixin mybutton($color_1, $color_2) {
  width: 250px;
  margin: 10px;
  border: 2px solid $color_1;
  padding: 6px 24px;
  font-size: 1.15em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: $color_1;
  background-color: $color_2;
  transition: $transition;
  &:hover {
    background-color: $color_1;
    border-color: $color_1;
    color: $color_2;
  }
  &:active {
    background-color: $color_1;
    border-color: $color_1;
    color: $color_2;
    box-shadow: none;
  }
  &:focus, &:active:focus {
    background-color: $color_1;
    border-color: $color_1;
    color: $color_2;
    outline: 5px auto $color_1;
  }
  &:visited {
    background-color: $color_1;
    border-color: $color_1;
  }
}

// styles
* {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

body {
  background-color: #dedede;
}

div {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  @include mybutton($standard, $white);
}

.btn-secondary {
  @include mybutton($secondary, $white);
}

.btn-submit {
  @include mybutton($submit, $white);
} 

.btn-cancel {
  @include mybutton($cancel, $white);
}