How can I skew outline of a focused element?

Question

I have a customized button/link element that transforms the said element to look like this:

Problem I'm having is that when the button is focused using keyboard the outline is not transformed along the borders of the element. I've also tried using box-shadow, with same results. Is there a proper way to transform outline, like I did with the element itself?

.button {
  font-family: $brand-font;
  font-weight: 900;
  transition: color $transition-duration ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  text-align: center;
  max-width: 320px;
  min-width: 200px;
  height: 40px;
  line-height: 40px;
  position: relative;
  border: none !important;
  font-size: 1.4rem;
  z-index: 0;
  padding: 0 1.8rem;
  background-color: transparent;
  color: $primary-blue;
  cursor: pointer;

  &:visited {
    border: none !important;
  }

  &.skewOnHover {
    color: $secondary-blue;
  }

  & > svg {
    vertical-align: middle;
  }

  &:focus {
    outline: 2px solid $primary-blue;
    // box-shadow: 0 0 0 2px $primary-blue;
  }

  &::before {
    content: ""; display: block;
    display: block;
    width: 100%; height: 100%;
    top: -2px; left: -2px;
    transition-property: border, background-color, transform;
    transition-duration: $transition-duration;
    transition-timing-function: ease-out;
    position: absolute;
    z-index: -1;

    // regular (cyan background, blue text)
    background-color: $secondary-blue;
    border: 2px solid $secondary-blue;
    transform: skew(-22.5deg);
  }

  &.skewOnHover {
    &::before {
      background-color: transparent;
      transform: skew(22.5deg);
    }
  }

Answer 1

Apply the outline to skewed element:

&:focus:before {
 outline: 2px solid red;
}

and reset the outline of button:

.button:focus {
  outline: none;
}

.button {
  font-weight: 900;
  transition: color 0.3s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  text-align: center;
  max-width: 320px;
  min-width: 200px;
  height: 40px;
  line-height: 40px;
  position: relative;
  border: none !important;
  font-size: 1.4rem;
  z-index: 0;
  padding: 0 1.8rem;
  background-color: transparent;
  color: blue;
  cursor: pointer;
}

.button:visited {
  border: none !important;
}

.button.skewOnHover {
  color: dodgerblue;
}

.button>svg {
  vertical-align: middle;
}

.button:focus {
  outline: none;
}

.button:focus:before {
  outline: 2px solid red;
}

.button::before {
  content: "";
  display: block;
  display: block;
  width: 100%;
  height: 100%;
  top: -2px;
  left: -2px;
  transition-property: border, background-color, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  position: absolute;
  z-index: -1;
  background-color: dodgerblue;
  border: 2px solid dodgerblue;
  transform: skew(-22.5deg);
}

.button.skewOnHover::before {
  background-color: transparent;
  transform: skew(22.5deg);
}

<button class="button">button</button>