How can I skew outline of a focused element? - html

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>