I'm having problem with this style, button is blue color but when you hover over it, it turns yellow from the bottom up using transform on after element.

///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') }}" >Najať upratovačku</a>

I checked it in Chrome and Firefox and it looks the same as in the picture:

CodePudding user response：

The pixel you're seing are from the blue background, it might be related to sub pixels, I'm not a 100% sure.

I would suggest a different way for doing this.

No need for an ::after pseudo element.

You are already using a gradient color for your button, so why not animate it?

1. Define a linear-gradient with hard stop going from blue to yellow
   background-image: linear-gradient(to top, blue 50%, yellow 50%);
2. Make it twice the height of the button
   background-size: 100% 200%;
3. Position it so only the blue part is visible
   background-position: 0 -100%;
4. Updates the position on hover
   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="#" >Najať upratovačku</a>