如何倾斜聚焦元素的轮廓？

Question

我有一个自定义的 button/link 元素，可以将上述元素转换为如下所示：

我遇到的问题是，当使用键盘聚焦按钮时，轮廓不会沿着元素的边界进行变换。我也尝试过使用 box-shadow，结果相同。有没有合适的方法来转换轮廓，就像我对元素本身所做的那样？

.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

将轮廓应用于倾斜元素：

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

并重置按钮的轮廓：

.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>

如何倾斜聚焦元素的轮廓？

How can I skew outline of a focused element?

html

css

css-transforms