具有边框半径的按钮在元素悬停后具有奇怪的边缘

Question

我对这种风格有疑问，按钮是蓝色的，但是当你将鼠标悬停在它上面时，它会在元素之后使用变换从下向上变成黄色。

///scss
.button {
    background: linear-gradient($primary-color, $primary-color);
    color: $text-color-light;
    display: inline-block;
    font-weight: 700;
    border-radius: 30px;
    padding: 0.9375rem 2.5rem;
    text-align: center;
    position: relative;
    z-index: 10;
    overflow: hidden;
    &:hover,
    &:focus {
        color: $text-color-light;
    }
    &:after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 102%;
        margin-left: -1%;
        margin-top: -1%;
        height: 150%;
        transform: translateZ(0);
        top: 80px;
        left: 0;
        background: linear-gradient($secondary-color, $secondary-color);
        transition: all 0.3s ease-in-out;
    }
    &:hover:after {
        top: 0;
        transform: scaleY(1.5);
    }
}

///html

<a href="{{ route('hiring') }}" class="button">Najať upratovačku</a>

我在 Chrome 和 Firefox 中查看了它，它看起来与图片中的一样：

Answer 1

您看到的像素来自蓝色背景，可能与子像素有关，我不能 100% 确定。

我建议采用不同的方法。

不需要 `::after` 伪元素。

您已经为您的按钮使用了渐变颜色，那么为什么不将其设置为动画呢？

定义一个 linear-gradient 硬停止从蓝色到黄色
background-image: linear-gradient(to top, blue 50%, yellow 50%);
使其成为按钮高度的两倍
background-size: 100% 200%;
将其放置在只有蓝色部分可见的位置
background-position: 0 -100%;
悬停时更新位置
background-position: 0 0;

.button {
  background-image: linear-gradient(to top, blue 50%, yellow 50%);
  background-size: 100% 200%;
  background-position: 0 -100%;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  border-radius: 30px;
  padding: 0.9375rem 2.5rem;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.button:hover, .button:focus {
  color: #000;
  background-position: 0 0;
}

<a href="#" class="button">Najať upratovačku</a>

具有边框半径的按钮在元素悬停后具有奇怪的边缘

Button with border-radius has weird edges when it has after element hovered

css

sass

不需要 `::after` 伪元素。

具有边框半径的按钮在元素悬停后具有奇怪的边缘

Button with border-radius has weird edges when it has after element hovered

css

sass

不需要 ::after 伪元素。

不需要 `::after` 伪元素。