CSS The button hover effect works reversely

[Antoniovnp]

Hello,

When I mouse over the button, the transition effect only works after leaving it.

button {
    width: 100%;
    margin: 0 auto;
    border: none;
    border-radius: 8rem;
    background: $neutral-darkGrayBlue;
    color: $neutral-white;
    padding: 1rem;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 1s ease-in;

    &:hover {
      background: linear-gradient(
        $gradient-bg-lightSlateBlue,
        $gradient-bg-lightRoyalBlue
      );
    }
  }

Can anyone help me, please?

 

[annpef]

You can't transition to/from a gradient.

When you leave, the background is the light gray default of the button (cause it instantly turns off the gradient), and that transitions to your dark color background is a shorthand.

You have background-color and background-image, and we can't transition between two different properties (also, background-image can't can't be animated/transitioned, so that means gradients can't be.)

 

[Antoniovnp]

Thank you @annpef I appreciate your help.