.button {
  position: relative;
  display: inline-block;
  max-width: 14em;
  margin-right: 0.5em;
  padding: 0.55em 1.35em 0.65em 1.35em;
  border: 1px solid $green1;
  border-radius: 2em;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
  outline-color: transparent;

  &:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: -2px;
    width: 100%;
    height: 100%;
    border: 2px solid $yellow;
    border-radius: inherit;
  }
  &:visited, &:focus, & {
    background-color: $white;
    text-decoration: none;
    color: $green1;
    outline-width: 0;
  }
  &:hover {
    background-color: $green1;
    text-decoration: none;
    color: $white;
  }
  &:focus {
    border-color: $yellow;
    &:after {
      opacity: 1;
    }
    &:hover {
      border-color: transparent;
      &:after {
        opacity: 0;
      }
    }
  }
}





.button {
  position: relative;
  display: inline-block;
  max-width: 14em;
  margin-right: 0.5em;
  padding: 0.55em 1.35em 0.65em 1.35em;
  border: 1px solid $green1;
  border-radius: 2em;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
  outline-color: transparent;

  &:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: -2px;
    width: 100%;
    height: 100%;
    border: 2px solid $yellow;
    border-radius: inherit;
  }
  &:visited, &:focus, & {
    background-color: $white;
    text-decoration: none;
    color: $green1;
    outline-width: 0;
  }
  &:hover {
    background-color: $green1;
    text-decoration: none;
    color: $white;
    cursor: pointer;
  }
  &:focus {
    border-color: $yellow;
    &:after {
      opacity: 1;
    }
    &:hover {
      border-color: transparent;
      &:after {
        opacity: 0;
      }
    }
  }
}





Add pointer to button hovers
Add pointer to button hovers

This was inspired by the button class on the label on the new question page Gareth is playing
